web-dev-qa-db-ja.com

同じ場所に複数のマーカー-MarkerClusterer

MarkerClustererを使用しています。まったく同じ場所に2つ以上のマーカーがある場合、APIはマーカーを1つだけ表示します-一番上のマーカーです。しかし、それぞれが個別のポップアップを開くので、どういうわけか私はすべてのマーカーを表示したいと思います。私はいくつかの解決策を見つけましたが、どれも機能していないようですが、誰かが同様の問題を抱えていて、解決策を共有してくれるでしょうか?

14
Grish

ようやく動作しました。これはまだ解決策を見つけていないすべての人のためのものです。以下のコードは、同じ場所のマーカーにオフセットを追加します。

createMarker関数に次のコードを追加します。

//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;

//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;

//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
    for (i=0; i < allMarkers.length; i++) {
        var existingMarker = allMarkers[i];
        var pos = existingMarker.getPosition();

        //if a marker already exists in the same position as this marker
        if (latlng.equals(pos)) {
            //update the position of the coincident marker by applying a small multipler to its coordinates
            var newLat = latlng.lat() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            var newLng = latlng.lng() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            finalLatLng = new google.maps.LatLng(newLat,newLng);
        }
    }
}

これを参照

google.maps.Marker新しい位置の値を持つ各マーカーのオブジェクト– finalLatLng

var marker = new google.maps.Marker({
    map: msf_namespace.mapParams.resultmap,
    position: finalLatLng,
    title: name,
    icon: markericon
});

//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.Push(marker);
30
Grish

MarkerClustererには、マップに表示するクラスターまでのmaxZoomを定義するオプションがあります。この値を18に設定すると、ユーザーが最大にズームインしたときにクラスターが表示されません。

 const markerCluster = new MarkerClusterer(map, markers,{maxZoom: 18});
1
Komal

FYI-精度

decimal places  decimal degrees N/S or E/W at equator
2   0.01    1.1132 km
3   0.001   111.32 m
4   0.0001  11.132 m
5   0.00001 1.1132 m
0
chris loughnane