8

Google マップには、同じ場所にある複数のマーカーを分割する方法はありません。これは、アパートの建物や専門サービスの建物など、複数の居住場所にいる人や企業で発生する可能性があります。ズーム レベルによっては、ショッピング モールなどでも発生する可能性があります。

それを回避する方法は、それらを「スパイダー化」することです。最初にクリックすると、その場所への線でそれらが分割されます。これは Google Earth で行われ、George MacKerron は Google Maps でそれを行うためのパッケージを書きました。( https://github.com/jawj/OverlappingMarkerSpiderfier )

これは、markerclusterer と統合できますが、marker clusterer によるマーカーのバッチ作成はサポートしていません。

私の問題は、私が取り組んでいるアプリケーションが、さまざまな種類のアクティビティに対して特定のアイコンを持ちたいということです。Spiderfier はマーカーの 1 つを上に置きます。マップを見ている人は、一番上のマーカーの下に 10 個以上のマーカーがある可能性があることを知る方法がありません。

理想的には、markercluster に別のアイコンに似た複数のマーカーがある場合に表示されるトップ マーカーを配置する方法があるでしょう。Spiderfier は、それらが近くにあるが正確に同じ場所 (デフォルトは 20 ピクセル) にない場合にも機能し、markercluster には正確に同じ場所にある複数のマーカーにアクセスするための準備がないため、直接の 1 対 1 ではありません。

理想的な動作は、クリックするとスパイダー化された個々のアイコンに割り込む、スパイダー用の特別なアイコンを持つことです。markerclusterer に似ていますが、ズームの変更がなく、同じ場所を処理します。特別なアイコンは、理想的には、markerclusterer のように、その場所にある他のマーカーの数を示します。特別なアイコンは非表示にするか、Spiderfied グループの一部にすることができます。

一部の宿泊施設がなければ、ユーザーはその場所に複数のアクティビティがあることを知る方法がありません。別のアクティビティ マーカーが表示されているため、必要なアクティビティがその場所にないと想定することさえあります。

これは問題のあるプランカーです: http://plnkr.co/edit/vimZNq?p=info

  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < 100; ++i) {
    var latLng = new google.maps.LatLng(Math.floor(Math.random() * 10) / 10 + 39,
      Math.floor(Math.random() * 10) / 10 - 100);
    var marker = new google.maps.Marker({
      position: latLng,
      title: "marker " + i + " pos: " + latLng,
      maxZoom: 8,
      map: map

    });
    marker.desc = marker.getTitle();
    bounds.extend(latLng);
    markers.push(marker);
    oms.addMarker(marker);
  }

  map.fitBounds(bounds);

  var markerCluster = new MarkerClusterer(map, markers);

ご協力いただきありがとうございます、

デビッド

4

3 に答える 3

5

これが私がそれを機能させる方法です。はGmapmapインスタンスで、omsは Overlapping Marker Spiderfier インスタンスです。また、最初のズームで Marker Clusterer を使用しているため、休憩が取れます。

map.addListener('zoom_changed', function() {        

    map.addListenerOnce('idle', function() {

        // change spiderable markers to plus sign markers
        // we are lucky here in that initial map is completely clustered
        // for there is no init listener in oms :(
        // so we swap on the first zoom/idle
        // and subsequently any other zoom/idle

        var spidered = oms.markersNearAnyOtherMarker();

        for (var i = 0; i < spidered.length; i ++) {

            // this was set when we created the markers
            url = spidered[i].icon.url;

            // code to manipulate your spidered icon url
        };

    });

});


oms.addListener('unspiderfy', function(markers) {

    var spidered = markers;

    for (var i = 0; i < spidered.length; i ++) {

        url = spidered[i].icon.url;

        // change it back
    };
});


oms.addListener('click', function(marker) {

  // put the clicked-on marker on top
  // when oms un-spiders

  marker.zIndex=999;

  // set infowindow, panning etc.

});
于 2015-12-24T15:58:51.387 に答える
0

いくつかの方法は興味深いようmarkersNearAnyOtherMarkerですが、うまくいきません。興味深い方法は、spiderfy および unspiderfy イベントを使用し、起動時にマーカーを変更することです。

overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel('*');
        marker.setIcon(myNormalIcon);
    })
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel(''+markers.length);
        marker.setIcon(myOverlapIcon);
    })
})

残念ながら、unspiderfyオーバーラップ マーカーを開いてから閉じるまで、イベントは発生しません。この解決策の結論が見つかったら、この投稿を更新します。

于 2015-11-25T16:58:09.380 に答える