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

Question

我正在尝试根据点击不同的地址来加载不同的 Google 地图实例。事件监听器作为一个魅力，但问题是标记没有加载。这是我的代码。我希望为每个地址 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

您在点击谷歌地图时调用 showMarker，而不是点击列表项。

如果您在 loadMap 函数中调用 showMarker(location)，它应该可以工作。

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

您可以移除地图上的点击事件监听器（除非您出于其他原因需要它）。

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。