0

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

我在互联网上的谷歌地图上发现了许多其他不同的例子，特别是在GeoCodeZip 上，但不是我的要求。

如果一旦满足此要求，则担心缩放更改事件的性能问题，因为需要更新工具提示（如果更改了重叠）。

更新 1：我已经向客户端显示了重叠标记蜘蛛，但不可接受。

有没有人有正确的道路或工作的例子？

谢谢-阿尼尔

4

1 回答 1

2

其核心是找到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));
});
}
于 2013-09-20T13:24:29.280 回答