使用google maps API,我们如何使用map.setCenter函数将当前位置设置为默认设置位置？
HVS*_*HVS 20 javascript google-maps geolocation
我正在使用Google Maps API编写JavaScript代码.
map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
上面的代码将地图画布的默认位置设置为Palo Alto.
我们如何编写脚本以使setCenter功能自动指向客户端的当前位置？
cee*_*yoz 15
您可以在支持它的浏览器中使用HTML5 GeoLocation API.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('geolocation not supported');
}
function success(position) {
alert(position.coords.latitude + ', ' + position.coords.longitude);
}
function error(msg) {
alert('error: ' + msg);
}
- @npdoty可能的HTML5品牌不是规范在这里相关. (3认同)
Dan*_*llo 10
我可以想到两种可能的选择.
首先,您可能需要考虑使用GeoLocation API,如ceejayoz建议的那样.这很容易实现,它是一个完全客户端的解决方案.要使用GeoLocation使地图居中,只需使用:
map.setCenter(new google.maps.LatLng(position.coords.latitude,
position.coords.longitude), 13);
...在success()GeoLocation getCurrentPosition()方法的回调中.
不幸的是,目前只有少数现代浏览器支持GeoLocation API.因此,您还可以考虑使用服务器端解决方案,使用MaxMind的GeoLite City等服务将客户端的IP地址解析到用户的位置.然后,您只需使用Google Maps API在浏览器中对用户的城市和国家/地区进行地理编码即可.以下可能是一个简短的例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Geocoding Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark) {
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
map.addOverlay(new GMarker(bounds.getCenter()));
}
});
}
</script>
</body>
</html>
只需userLocation = 'London, UK'用服务器端解析的地址替换即可.以下是上例中的截图:
您可以通过删除map.addOverlay(new GMarker(bounds.getCenter()));线来删除标记.
已存在于google api中:
if (GBrowserIsCompatible())
{
var map = new google.maps.Map2(document.getElementById("mapdiv"));
if (google.loader.ClientLocation)
{
var center = new google.maps.LatLng(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
var zoom = 8;
map.setCenter(center, zoom);
}
}
有几个线程有相同的问题......
nex*_*nex -1
map = new google.maps.Map2(document.getElementById("map_canvas"));
pos = new google.maps.LatLng(37.4419, -122.1419);
map.setCenter(pos, 13);
map.panTo(pos);