0

現在、Google マップに 500 ～ 600 個のマーカーをツールチップとして表示しています。ここで、Marker1、Marker2、Marker3 がマップ上で重なっている場合、重なっているすべてのマーカーのツールチップをカンマ区切り (Marker1、Marker2、Marker3 など) として表示する必要があります。

インターネットの Google マップ、特にGeoCodeZipで他の多くの例を見つけましたが、私の要件ではありません。

この要件が満たされると、ツールチップを更新する必要があるため (オーバーラップが変更された場合)、ズーム変更イベントでのパフォーマンスの問題が懸念されます。

Update1 :重複マーカーのスパイダーフィアをクライアントに表示しましたが、受け入れられません。

誰かが正しい道や実例を持っていますか?

ありがとう -アニル

4

1 に答える 1

2

これの核心は、 LatLngs 間のピクセル距離を見つけることです。次に、各マーカーを追加する前に、マーカーと既存のマーカーの間のピクセル距離を確認します。近くに別のマーカーがある場合は、タイトルに追加します。それ以外の場合は、新しいマーカーを作成します。jsフィドル

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 に答える