谷歌地图和HTML5中的地理位置

我正在研究基于位置的服务。我找不到与我下面的查询任何明确的答复，因此我asking-谷歌地图和HTML5中的地理位置

如何启用HTML5地理位置在我们自己的服务器？或者是否有任何中央地理位置数据库会默认提供位置服务（如DNS）？

我惊呆了，我的笔记本电脑看到的地理位置在谷歌地图（http://html5demos.com/geo）精度（显然GPS免费），这是中〜20M范围内。什么是技术？如何在我们自己的系统中实现？

当我用来寻找我的IP位置，它使用的地图，是展现ISP办公室〜15公里处，而不是最近的情况，即显示几乎确切位置。可能是什么原因？可能是因为我使用我的android手机使用相同的Wireles路由器，它需要从那里的位置？或者在HTML5中，他们开始查找特定的IP地址（这似乎不太可能）。

来源

2010-11-01 Morison

// Check for geolocation support 
if (navigator.geolocation) { 
    // Use method getCurrentPosition to get coordinates 
    navigator.geolocation.getCurrentPosition(function (position) { 
     // Access them accordingly 
     alert(position.coords.latitude + ", " + position.coords.longitude); 
    }); 
}

从

http://robertnyman.com/2010/03/15/geolocation-in-web-browsers-to-find-location-google-maps-examples/

来源

2010-11-01 16:41:03 Barkermn01

你可以找到关于如何工作的，以及如何在优秀Dive Into HTML 5使用它在自己的网站上大量的信息。这本书建议使用Modernizr，提供其中一个简单的例子：

function get_location() { 
if (Modernizr.geolocation) { 
navigator.geolocation.getCurrentPosition(show_map); 
} else { 
// no native support; maybe try Gears? 
} 
}

它正在处理您的笔记本电脑的主要方式是通过使用本地无线接入点的已知位置。这从浏览器到浏览器有所不同 - firefox有a good explanation here。他们使用positioning services from Google，这是通过Google街景视图汽车完成的映射创建的。

来源

2010-11-01 16:44:40

这其实很简单。上面的从Dive到HTML的例子是不完整的，因为它没有显示show_map函数，它是一个用户创建的函数，它实际上读取传入数据并对其执行任何操作。下面是一个更完整的例子：

<!DOCTYPE HTML> 

<html lang = "en"> 

<head> 

    <title>location.html</title> 

    <meta charset = "UTF-8" /> 

    <script type = "text/javascript"> 

    //<![CDATA[ 



    function getLoc(){ 

    navigator.geolocation.getCurrentPosition(showMap); 

    } // end getLoc 



    function showMap(position){ 

    var lat = position.coords.latitude; 

    var long = position.coords.longitude; 

    var linkUrl = "http://maps.google.com?q=" + lat + "," + long; 

    var mapLink = document.getElementById("mapLink"); 

    mapLink.href = linkUrl; 

    var embedMap = document.getElementById("embedMap"); 

    embedMap.src = linkUrl + "&z=16&amp;output=embed"; 

    } // end showMap 



    //]]> 

    </script> 

</head> 



<body onload = "getLoc()"> 

    <h1>Geolocation Demo</h1> 



    <p> 

    <a id = "mapLink" 

     href = "http://maps.google.com">click for a map</a> 

    </p> 



<iframe id = "embedMap" 

     width="800" 

     height="500" 

     frameborder="0" 

     scrolling="no" 

     marginheight="0" 

     marginwidth="0" 

     src= ""> 

</iframe><br /> 



</body> 

</html>

这个例子（从我即将到来的HTML5书）具有身体的onload机制称为getLoc（）函数。这使用navigator.geolocation.getCurrentPosition（）函数来请求权限向量。它会弹出一个权限对话框，如果用户选择不分享她的当前位置，该权限对话框将被拒绝。如果用户一直玩，则会显示指定的回调函数（在我的示例中为showMap）。

回调函数自动接受一个特殊位置对象作为其唯一的参数。这个对象有许多潜在的有用属性，但是经度和纬度是最有帮助的。您可以使用这些值来简单地打印出当前位置。您还可以将这些值连接到Google地图网址，以获取当前位置的快速Google地图。我还将Google地图嵌入到当前页面，并更改嵌入式（iframe）地图的URL以获得即时反馈。

希望这会有所帮助！

来源

2010-11-01 17:00:19

仍然缺少的是，在后面HTML5的地理定位技术的点。如果我没有（想要）使用谷歌地图或谷歌服务，我将如何将这个地理位置服务包含在我自己的服务器中？ IP地理位置数据库是否通用？或者，具体的公司服务？ – Morison 2010-11-02 06:04:22

@Morison HTML5指定地理定位工作的方式是，您从浏览器请求用户的位置。浏览器然后提供它，但它可以。就firefox而言，它会将附近无线接入点的信息发送给Google，然后将结果发送回请求的网站。对于Mobile Safari和Android，它可以使用设备的GPS和手机信息。一旦你有了位置，你可以随心所欲地做任何事情 - 你不需要显示谷歌地图，你可以例如自定义你的内容的位置，或显示一个地图从Bing。 – 2010-11-02 10:33:54

function GetGeolocation() { 

navigator.geolocation.getCurrentPosition(GetCoords, GetError); 

}

现在检查GetCords功能

function GetCoords(position){ 

alert('latitude: '+ position.coords.latitude); 

alert('longitude: '+ position.coords.longitude); 

alert('accuracy: '+ position.coords.accuracy); 

FindmeOnMap(position.coords.latitude, position.coords.longitude); 

}

来源

2011-11-05 16:56:59

试试这个代码

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <!-- 
    Include the maps javascript with sensor=true because this code is using a 
    sensor (a GPS locator) to determine the user's location. 
    See: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API 
    --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

    <script> 
// Note: This example requires that you consent to location sharing when 
// prompted by your browser. If you see a blank space instead of the map, this 
// is probably because you have denied permission for location sharing. 

var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 6 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'Location found using HTML5.' 
     }); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

来源

2014-01-09 13:13:21

谷歌地图和HTML5中的地理位置

回答

相关问题