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);

自定义标记重叠问题

1 个答案: