javascript - 在点击事件上加载谷歌地图 API，标记不显示

Question

我正在尝试根据点击不同的地址来加载不同的 Google map 实例。事件监听器很有用，但问题是标记未加载。这是我的代码。我想要为每个地址 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

如果你想在地址选择后显示标记，你应该在 loadMap 中移动 showMarker(location)。

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

我还建议从 <li> 移动 'onclick' 事件元素到内部 <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为您提供您的代码。