標記渲染不止一次

Question

我已經實現谷歌地圖v3，它更新while bounds_changed事件，但問題是當事件觸發它不止一次呈現標記，任何建議。

我已經將製造商添加到標記管理器。

 var map = null; 
     var myLatLng = null; 
     var sidebarHtml = ""; 
     var infowindow = infowindow = new google.maps.InfoWindow({});; 
     var mgr = null; 
     var currentBounds = null; 
     var xml = null; 
     var markers = null; 
     var markersArray = []; 

     var customIcons = { 
      restaurant: { 
       icon: 'images/icon_01.png' 
      }, 
      bar: { 
       icon: 'images/icon_02.png' 
      } 
     } 

     function load() { 
      var myOptions = ({ 
       center: new google.maps.LatLng(47.6145, -122.3418), 
       zoom: 13, 
       mapTypeId: 'roadmap' 
      }); 
      map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
      mgr = new MarkerManager(map, {fitBounds: true}); 

      google.maps.event.addListener(map, 'bounds_changed', downloadUrl); 
     } 

     function downloadUrl() {     
      var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest; 
      var params = ""; 
      var url = "phpmysqlajax_genxml.php"; 

      request.onreadystatechange = function() { 
       if(request.readyState == 4) { 
        //alert(request.responseXML); 
        useTheData(request); 
       } 
      }; 

      request.open("GET", url + params, true); 
      request.send(null); 
     } 

     function useTheData(data) { 
      currentBounds = map.getBounds(); 
      xml = data.responseXML; 
      markers = xml.documentElement.getElementsByTagName("marker"); 
      mgr.clearMarkers(); 

      if (!currentBounds) currentBounds = new google.maps.LatLngBounds(); 

      sidebarHtml = '<ul class="sidebar">'; 

      for(var i = 0; i < markers.length; i++) { 

       var name = markers[i].getAttribute("name"); 
       var address = markers[i].getAttribute("address"); 
       var lat = parseFloat(markers[i].getAttribute("lat")); 
       var lng = parseFloat(markers[i].getAttribute("lng")); 
       var type = markers[i].getAttribute("type"); 
       var latlng = new google.maps.LatLng(lat, lng); 

       if (currentBounds.contains(latlng)) { 
        attachMarker(name, address, latlng, type); 
        markerSidebarEntry(i); 
       } 
      } 

      sidebarHtml += "</ul>"; 

      document.getElementById("sidebar").innerHTML = sidebarHtml; 
     }; 

     function attachMarker(name, address, latlng, type) { 

      var marker = new google.maps.Marker({ 
       position : latlng, 
       map: map, 
       icon  : customIcons[type].icon 
      }); 
      mgr.addMarker(marker, 5); 

      markersArray.push(marker); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(address); 
       infowindow.open(map, this); 
      }); 

      // add marker here. 
     } 

     function markerSidebarEntry(i) { 
      var name = markers[i].getAttribute("name"); 

      sidebarHtml += '<li class="' + markers[i].getAttribute("type") + '"><a href="javascript:markerClick(' + i + ');">' + name + '</a></li>'; 
     } 

     function markerClick(i) { 
      google.maps.event.trigger(markersArray[i], "click"); 
     } 

Answer 1

這可能只是複製粘貼錯誤，但是這個代碼似乎不正確（「信息窗口」的雙重申報和複製;在後）：

var infowindow = infowindow = new google.maps.InfoWindow({});; 

另外這裏你不需要（）圍繞{}

var myOptions = ({ 
       center: new google.maps.LatLng(47.6145, -122.3418), 
       zoom: 13, 
       mapTypeId: 'roadmap' 
      }); 

建議你通過像JSLint運行JS代碼。