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

您在点击Google地图时调用了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);
       }

我还建议移动＆＃39; onclick＆＃39;从<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代码。

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

2 个答案: