在點擊事件中加載Google Map API，標記不會顯示

Question

我正在嘗試根據不同的地址加載不同的Google地圖實例。 事件偵聽器具有吸引力，但問題是Marker無法加載。 這是我的代碼。 我希望標記為每個地址onclick事件加載。

<div style="float:left;width:100%;">
  <div style="float:left;">
  <h2>Locations</h2>
  <ul class="menu">
   <li onclick="loadMap('43.6581859','-79.3906945');">
     <a href="#">Category 1</a></li>
   <li onclick="loadMap('43.658589','-79.3872499');">
     <a href="#">Category 2</a></li>
   <li onclick="loadMap('43.6533033','-79.4058543');">
     <a href="#">Category 3</a></li>
  </div>
  <div style="float:left; width: 20px;">&nbsp;</div>
  <div style="width:400px;height:450px; overflow:hidden;"><h2>Map</h2>
  <div id="map_canvas" style="height:400px;"></div>
  </div>
</div>
<!--Load Map Script -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  var map;
  var home;
  var markersArray = [];

  function initialize() {
       home = new google.maps.LatLng('43.659924','-79.38875');   
       var opts = {
            zoom: 15,
            center: home,
            mapTypeId: google.maps.MapTypeId.ROADMAP
       };

       map = new google.maps.Map(document.getElementById('map_canvas'), opts);
       google.maps.event.addListener(map, "click", function(event) {
              showMarker(event.latLng);
           });    

  }

  function loadMap(lat,lng)
       {
           var location= new google.maps.LatLng(lat, lng);
           map.setCenter(location);

       }

    function showMarker(location) {    
           deleteOverlays();               
           var marker = new google.maps.Marker({
               position: location,
               map: map
           });
           markersArray.push(marker);

    }


   function deleteOverlays() {
        if (markersArray) {
            for (i=0; i < markersArray.length; i++) {
                markersArray[i].setMap(map);
            }
        markersArray.length = 0;
        }
    }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

任何幫助深表感謝！

Answer 1

您是在單擊Google地圖時調用showMarker，而不是在單擊列表項時調用。

如果在loadMap函數中調用showMarker（location），則它應該可以工作。

function loadMap(lat,lng) {
    var location = new google.maps.LatLng(lat, lng);
    map.setCenter(location);
    showMarker(location);
} 

而且，您可以在地圖上刪除click事件監聽器（除非您出於某些其他原因而想要）。

您似乎還對deleteOverlays函數有問題，如果要刪除所有現有標記，則應將null傳遞給setMap函數：

function deleteOverlays() {
    if (markersArray) {
        for (i=0; i < markersArray.length; i++) {
            markersArray[i].setMap(null); //pass null in here
        }
    markersArray.length = 0;
    }
}

Answer 2

如果要在選擇地址后顯示標記，則應在loadMap中移動showMarker（location）。

function loadMap(lat,lng)
       {
           var location= new google.maps.LatLng(lat, lng);
           map.setCenter(location);
           showMarker(location);
       }

我也建議將'onclick'事件從<li>元素移動到內部<a>元素。 這樣可以避免意外點擊。

   <li><a onclick="loadMap('43.6581859','-79.3906945');" href="#">Category 1</a></li>
   <li><a onclick="loadMap('43.658589','-79.3872499');" href="#">Category 2</a></li>
   <li><a onclick="loadMap('43.6533033','-79.4058543');" href="#">Category 3</a></li>

我還要注意，您的deleteOverlays()函數無法正常工作，因為在您的示例中，您調用了

markersArray[i].setMap(map);

代替

markersArray[i].setMap(null);

我認為應該更好:)

我已經用您的代碼為您創建了工作的JSFiddle 。