谷歌getLocation功能不工作在我的腳本

Question

大家好我需要顯示我的網站與我的家像谷歌地圖標記（我用它的商店位置），並集中在用戶的位置。我嘗試使用：

<script> 
     var myCenter = new google.maps.LatLng('xxx'); 
     var userCenter; 

      function getLocation() { 
       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(showPosition); 
       } 
      } 

      function showPosition(position) { 
       var latlon = position.coords.latitude + "," + position.coords.longitude; 
       userCenter=new google.maps.LatLng(latlon); 
      } 

     var marker; 

     function initialize() 
     { 
      var mapProp = { 
       center: userCenter, 
       zoom:15, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

      marker=new google.maps.Marker({ 
       position:myCenter, 
       }); 

      marker.setMap(map); 

      var infowindow = new google.maps.InfoWindow({ 
       content:"Casa" 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      }); 
     }      

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

    </script> 

如果我不使用userCenter並使用MyCenter，地圖工作並在MyCenter中居中顯示。

Answer 1

問題是函數的執行順序。您希望在userCenter可用之前使用userCenter。這會產生一個錯誤（在var mapProp = {center：userCenter，...}），所以初始化停止工作。

順便說一下，你永遠不會調用getLocation（）。一個僅被定義的函數，什麼也不做。一個函數只有在某處調用它時纔會執行某些操作。

（順便說2：navigator.geolocation不是谷歌的服務它是Web瀏覽器提供的服務。）我把多餘的註釋代碼

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 
<script> 
    var myCenter = new google.maps.LatLng(50.845463, 4.357112); 
    var userCenter; 
    var marker; 
    var map; 

    // sends a request to get the location of the user. 
    // Notice: you will have to wait for the callback (= showPosition) before you have the result of this request. 
    // So you cannot rely only on userCenter. You must use myCenter, until you are sure that showPosition receives the response 
    function getUserLocation() { 
     if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
     } 
    } 

    // Response of getUserLocation(). The location of the client is known. 
    // Notice: by this time initialize() has been called. initialize() doesn't know anything about userCenter. 
    // userCenter will only get a value when this function is called. 
    function showPosition(position) { 
     userCenter = new google.maps.LatLng(
     position.coords.latitude, 
     position.coords.longitude 
    ); 
     // Now we know the position of the client. We can set the center of the map to this location 
     map.setCenter(userCenter); 
    } 

    // this function initializes Google maps. It is triggered the moment the DOM of the web page is loaded. 
    function initialize() { 
     // let's start the request to get the position of the user 
     getUserLocation(); 

     var mapProp = { 
     center: myCenter, // notice: userCenter is still undefined, you cannot use it yet. 
     zoom:15, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
     marker = new google.maps.Marker({ 
     position: myCenter, 
     map: map // this replaces marker.setMap(map); 
     }); 

     var infowindow = new google.maps.InfoWindow({ 
     content: "Casa" 
     }); 
     // a click on the marker opens the infoWindow 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>