使用 W3C GeoLocation API 难以显示地图并将其与用户位置居中
我正在使用以下脚本,但很难传递我使用用户位置创建的纬度和经度变量。当我删除我创建的纬度和经度变量并手动输入 0,0 时,它可以很好地进行调试...地图应该显示在 id 为 map_canvas 的 div 中。
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
var myOptions = {
zoom: 1,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); map.setTilt(45);
});
I'm using the following script and having difficulty passing in the lat and lon variables I created with user's location. When I remove the lat and lon variables I created and manually put in 0,0 it works fine for debugging's sake...The map should be displayed in a div with id of map_canvas.
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
var myOptions = {
zoom: 1,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); map.setTilt(45);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您的问题可能就在这里:
大概,
handle_geolocation_query
看起来像这样:但是
navigator.geolocation.getCurrentPosition
是一个异步函数调用:强调我的。
因此,您的
handle_geolocation_query
回调将在getCurrentPosition
拥有位置时调用,而不是在您调用getCurrentPosition
时调用。因此,当您到达此处时:您的
position
不一定包含任何有用的内容,并且您可能会收到一条错误消息,告诉您position.coords
未定义或不是对象,或者类似的东西。您需要将
new google.maps.LatLng
和new google.maps.Map
内容移至handle_geolocation_query
回调中,您将在其中获得有用的位置
值。Your problem is probably right here:
Presumably,
handle_geolocation_query
looks something like this:But
navigator.geolocation.getCurrentPosition
is an asynchronous function call:Emphasis mine.
So, your
handle_geolocation_query
callback will be called bygetCurrentPosition
when it has the position, not when you callgetCurrentPosition
. So, when you get to here:Your
position
won't necessarily contain anything useful and you probably get an error telling you thatposition.coords
is undefined or not an object or something similar.You need to move your
new google.maps.LatLng
andnew google.maps.Map
stuff to inside thehandle_geolocation_query
callback where you'll have a usefulposition
value.http://j.maxmind.com/app/geoip.js
http://maps.google.com/maps/api/js?sensor=true
您好,地理定位本质上是异步的,因此不要将其与同步函数一起使用,否则新的 google.maps.LatLng(lat, lon) 函数可能会得到空值。根据您的要求尝试上面的代码。您可以在 jquery 中进行类似的工作。
http://j.maxmind.com/app/geoip.js
http://maps.google.com/maps/api/js?sensor=true
Hi, geolocation is asynchronus by nature hence don't use it with synchronus function ,otherwise u may get null value for new google.maps.LatLng(lat, lon) function. try the above code according to your requirement.you can work similarly in jquery.