使用W3C GeoLocation API難以顯示和居中地圖與用戶的位置

Question

我正在使用以下腳本，並且難以傳遞用戶位置創建的緯度和經度變量。當我刪除我創建的lat和lon變量並手動放入0,0時，它對調試的工作很好......地圖應該顯示在帶有map_canvas的id的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); 
}); 

Answer 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 [...]

重點是我的。

因此，當您撥打getCurrentPosition時，您的handle_geolocation_query回撥將被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值內。

Answer 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 

嗨，地理位置是asynchronus本質因此不符合SYNCHRONUS函數中使用它，否則U可以爲新google.maps.LatLng得到空值（LAT， lon）功能。根據你的需求嘗試上面的代碼。你可以在jQuery中類似的工作。