Сверните наконечник совпадающих маркеров в Google Map

Question

В настоящее время я показываю 500-600 маркеров на карте Google, их имена в виде подсказки. Теперь, Мне нужно отобразить подсказку всех перекрывающихся маркеров как разделенных запятыми, т. Е. Marker1, Marker2, Marker3 и т. Д., Если Marker1, Marker2, Marker3 перекрываются на карте.

Я нашел много других различных примеров на карте Google в Интернете, особенно в GeoCodeZip, но не в моем требовании.

Если это требование заполнено, боятся проблем с производительностью при изменении событий с изменением масштаба, так как всплывающая подсказка должна быть обновлена ​​(если перекрытие изменяется).

Update1: Я уже указал Overlapping Marker spiderfier клиенту, но не приемлем.

У кого-нибудь есть правильный путь или рабочий пример?

Благодаря -Anil

Answer 1

Ядро это найти the pixel distance between LatLngs. Затем перед добавлением каждого маркера проверяйте расстояние между пикселями между ним и любыми существующими маркерами. Если есть еще один маркер рядом, добавьте в заголовок иначе создайте новый маркер. jsFiddle

function init() { 
var mapOptions = { 
    center: new google.maps.LatLng(0, -0), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

// to get the pixel position from the latlng 
// https://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3 
var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 

google.maps.event.addListenerOnce(map, 'idle', function() { 
    if (overlay.getProjection()) { 
     var points = [ 
      { latlng: new google.maps.LatLng(40, -100), title: '1' }, 
      { latlng: new google.maps.LatLng(40.125, -100.125), title: '2' }, 
      { latlng: new google.maps.LatLng(40.25, -100.25), title: '3' }, 
      { latlng: new google.maps.LatLng(40.5, -100.5), title: '4' }, 
      { latlng: new google.maps.LatLng(40.75, -100.75), title: '5' }, 
      { latlng: new google.maps.LatLng(41, -101), title: '6' }, 
      { latlng: new google.maps.LatLng(35, -95), title: '7' }, 
      { latlng: new google.maps.LatLng(45, 105), title: '8' }, 
      { latlng: new google.maps.LatLng(25, -115), title: '9' }, 
      { latlng: new google.maps.LatLng(55, -85), title: '10' }, 
      { latlng: new google.maps.LatLng(30, -34), title: '11' } 
     ]; 

     // for each point   
     var markers = []; 
     points.forEach(function (point) { 
      var nearby = false; 
      var pointPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(point.latlng); 
      markers.forEach(function(marker) { 
       var markerPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
       // check for marker 'near by' 
       if (Math.abs(pointPixelPosition.x - markerPixelPosition.x) < 10 || Math.abs(pointPixelPosition.y - markerPixelPosition.y) < 10) { 
        nearby = true; 
        marker.setTitle(marker.getTitle() + ', ' + point.title); 
       } 
      }); 

      // create new marker 
      if (!nearby) { 
       markers.push(new google.maps.Marker({ map: map, position: point.latlng, title: point.title })); 
      } 
     }); 
    } 

    map.setCenter(new google.maps.LatLng(39.8282, -98.5795)); 
}); 
}