自定義標記重疊問題

Question

我在地圖上顯示了自定義標記。其中一些相互重疊。 因此，爲此我創建了一個邏輯來顯示每個標記點擊的infowindows分隔。

這裏是我的示例：http://jsfiddle.net/u758rqpa/20/

在這裏你可以看到，當點擊標記地圖縮放。

但是，我想當我點擊重疊標記，然後它應該放大不在一個單獨的標記點擊。

那麼，有沒有什麼辦法可以找出標記重疊？

因此，當標記分離時，我可以停止縮放。

 google.maps.event.addListener(marker, 'click', (function (marker, x, content) { 
     return function() { 
      var zoomLevel = map.getZoom(); 
      if (zoomLevel != 15) 
       map.setZoom(zoomLevel + 1) 

      infowindow.close(); 
      infowindow.setOptions({ 
       content: content, 
       pixelOffset: new google.maps.Size(0, 20) 
      }) 
      infowindow.open(map, this); 
     } 
    })(marker, x, content)); 

Answer 1

有這個簡單的方法，Marker Clusterer

Check this fiddle of yours.

More Examples Here

var markerCluster = new MarkerClusterer(map, markersArray, {imagePath:'https://googlemaps.github.io/js-marker-clusterer/images/m'}); 

function initialize() { 
     var mapOptions = { 
      zoom: 7, 
      draggableCursor: 'default', 
      draggingCursor: 'pointer', 
      visualRefresh: true, 
      scaleControl: true, 
      scaleControlOptions: { 
       position: google.maps.ControlPosition.TOP_CENTER 
      }, 
      streetViewControl: false, 
      maxZoom: 17, 
      minZoom: 4, 
      center: new google.maps.LatLng(40.73761121, -73.8186132), 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

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

     var color = ['red', 'blue', 'yellow','pink', 'black','green','pink','gray','red', 'blue', 'yellow', 'black', 'gray']; 

     var markerA = [ 
      ['BQ04998A_A', '-73.8186132', '40.73761121', '30'], 
      ['BQ04280A_B', '-73.97947631', '40.64278852', '130'], 
      ['BQ04673A_B', '-73.90797053', '40.63474517', '150'], 
      ['LI12404B_A', '-73.72630945', '40.65964026', '30'], 
      ['BQ04401A_C', '-73.78156774', '40.6451916', '250'], 
      ['BQ06011B_B','-73.79849804','40.66775732','145'], 
      ['BQ06176B_B','-73.86074985','40.75626901','140'], 
      ['LI12869A_B','-73.59015092','40.6796578','150'], 
      ['LI13123C_C','-73.1161812','40.90960403','303'], 
      ['NY01114B_A','-73.99099681','40.75596539','340'], 
      ['BQ04567E_A','-73.82849995','40.75500521','30'], 
      ['LI12031A_A','-73.70109864','40.75319817','30'], 
      ['LI12089B_A','-73.58183184','40.65620728','60'], 
      ['BQ04072F_C','-73.8900656','40.7466413','290'], 
      ['BQ04113A_B','-73.8933153','40.68161187','150'] 
     ]; 
     var marker; 
     var mkrs = []; 
     for (var i = 0; i < markerA.length; i++) { 

      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(markerA[i][2], markerA[i][1]), 
       map: map, 
       icon: { 
        path: 'm 32.460621,0.112468 -32.372233,-0.022 0,-0.088 L 0,0.090468 l 22.91468,22.9147 c 0.02205,-0.022 0.04437,-0.044 0.06629,-0.066 6.300656,-6.3007 9.451842,-14.5699 9.47965,-22.8263 z', 

        fillColor: color[i], 
        fillOpacity: 1, 
        strokeColor: '', 
        strokeWeight: 0, 
        rotation: 280 + markerA[i][3], 
        anchor: new google.maps.Point(0, 0) 
       } 
      }); 

      mkrs.push(marker); 


      google.maps.event.addListener(marker, 'click', (function (marker, i, content) { 
       return function() { 
       var zoomLevel = map.getZoom(); 
      if (zoomLevel != 15) 
       map.setZoom(zoomLevel + 1) 

      infowindow.close(); 
      infowindow.setOptions({ 
       content: content, 
       pixelOffset: new google.maps.Size(0, 20) 
      }) 
      infowindow.open(map, this); 
       } 
      })(marker, i, content)); 
     } 

      var markerCluster = new MarkerClusterer(map, mkrs, {imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'}); 
     var content = markerA[i][0]; 
    } 



    google.maps.event.addDomListener(window, 'load', initialize);