使用 W3C GeoLocation API 难以显示和居中地图与用户的位置答案

【问题标题】：Having difficulty displaying and centering map with user's location using W3C GeoLocation API使用 W3C GeoLocation API 难以显示和居中地图与用户的位置
【发布时间】：2011-10-14 20:45:12
【问题描述】：

我正在使用以下脚本，但在传递我使用用户位置创建的 lat 和 lon 变量时遇到了困难。当我删除我创建的 lat 和 lon 变量并手动输入 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); 
});

【问题讨论】：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);可以改为 var map = new google.maps.Map($("#map_canvas"), myOptions);
'position' 来自 W3C GeoLocation API

标签： jquery geolocation google-maps-api-3 geoapi

【解决方案1】：

你的问题可能就在这里：

navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);

大概handle_geolocation_query 看起来像这样：

var position;
function handle_geolocation_query(pos) {
    position = pos;
}

但是navigator.geolocation.getCurrentPosition是一个异步函数调用：

getCurrentPosition() 方法接受一个、两个或三个参数。调用时，它必须立即返回，然后异步尝试获取设备的当前位置。如果尝试成功，则必须调用 successCallback [...]

强调我的。

所以，handle_geolocation_query 回调将在 getCurrentPosition 有位置时调用，而不是在您调用 getCurrentPosition 时调用。所以，当你到达这里时：

var lat = position.coords.latitude;
var lon = position.coords.longitude;

您的position 不一定包含任何有用的内容，您可能会收到一条错误消息，告诉您position.coords 未定义或不是对象或类似内容。

您需要将您的 new google.maps.LatLng 和 new google.maps.Map 内容移动到 handle_geolocation_query 回调中，您将在其中获得有用的 position 值。

【讨论】：

【解决方案2】：

http://j.maxmind.com/app/geoip.js

http://maps.google.com/maps/api/js?sensor=true

 var ulat;
 var ulon;
 var map;

         if (navigator.geolocation)  {



       navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);

            }

            else if (!navigator.geolocation)

            {  
             max();  
            } 
             else
            { 
             alert("Sorry user location can't be detected");
              initialize();   
            }   



//maxmind api for fallback
        function max()  
        { 
              ulat=geoip_latitude();
              ulon=geoip_longitude();

            initialize();
        }  


        function handle_errors(error)  
        {  
            switch(error.code)  
            {  
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
                break;  

                case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
                break;  

                case error.TIMEOUT: alert("retrieving position timed out");  
                break;  

                default: alert("unknown error");  
                break;  
            } 
        initialize();    
        } 

        function handle_geolocation_query(position){ 

        ulat=position.coords.latitude;
        ulon=position.coords.longitude;
      /* alert('Lat: ' + position.coords.latitude +  
                  ' Lon: ' + position.coords.longitude); */ 

        initialize();
        } 


     function initialize(){
     loc = new Array();
     geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(ulat,ulon);
       var myOptions = {
       zoom: 3,
       center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);



}//end of initialize

嗨，地理位置本质上是异步的，因此不要将其与同步功能一起使用，否则您可能会为新的 google.maps.LatLng(lat, lon) 功能获得空值。根据您的要求尝试上面的代码。您可以在 jquery 中进行类似的工作。

【讨论】：