使用JavaScript顯示Google地圖標記

Question

我似乎無法將標記添加到我的地圖。我正在使用Google Maps v.3和Ruby on Rails。

這裏是我的JavaScript：

<script type="text/javascript"> 
var map; 
    function initialize() 
    { 
     var lat, lon, myOptions; 
     if(navigator.geolocation) 
     { 
      navigator.geolocation.getCurrentPosition(function(position) 
      { 
       lat = position.coords.latitude; 
       lon = position.coords.longitude; 
       myOptions = { 
        center: new google.maps.LatLng(lat, lon), 
        zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      }, 
      function(error) 
      { 
       alert('Error: An error occur while fetching information from the Google API'); 
      }); 
     } 
     else 
     { 
      alert("Your browser doesn't support geolocations, please consider downloading Google Chrome"); 
     } 
    } 

    // Function for adding a marker to the page. 
    function addMarker(lat, lng) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat, lng), 
      map: map 
     }); 
    } 

</script> 

下面是HTML頁面，我怎麼稱呼它：

<div id="maps"> 
    <div id="map_canvas" style="width:100%; height:400px"> 
</div> 
<script type="text/javascript"> 
initialize(); 
addMarker(46.4352,-80.9455); 
</script> 

Answer 1

這是因爲在此之前initialize()已完成addMarker()被調用。

initialize()需要等待來自地理位置API的響應，這意味着當您嘗試創建標記時地圖未初始化。

如果在回調中包裝addMarker，並將其傳遞給初始化函數，該函數在接收到響應後調用回調函數，則該函數應該按預期工作。

initialize(function() { 
    addMarker(46.4352,-80.9455); 
}); 

function initilize(callback) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     // set up the map 
     callback(); 
    }); 
}