Question

目前，我在Google地图上显示500-600个标记，其名称为工具提示。现在，如果Marker1，Marker2，Marker3在地图上重叠，我需要以逗号分隔显示所有重叠标记的工具提示，即Marker1，Marker2，Marker3等。

我在互联网上的谷歌地图上发现了许多其他不同的例子，尤其是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));
});
}

在Google地图上合并重叠标记的工具提示

1 个答案: