25

Filemaker の db ファイルで markerCLusterer V3 を使用して、アドレスに基づいて現在の配送場所の (セミライブ) マップを生成しています。Google から緯度/経度を取得し、それらのフィールドに入力することは問題ありません。markerClusterer を介してマップを生成することは問題ありません。複数のマーカーを表示できるように、maxZoom 変数を変更して最大ズームを超えてクラスターを分割できるように、JS をローカルでホストしています。ただし、緯度/経度がまったく同じマーカーでは、最後に入力されたマーカーしか表示されません。OverlappingMarkerSpiderfier をこの JS に統合して、maxZoom を超えてズームインした後、マーカーが「スパイダー」してマーカーを表示するようにしたいと思います (例として、複数の機器が同じ住所に配送されている場合)。これを行う方法に関する情報は、Web 上では見つかりません。これ' それは単純で、私はそれを見逃しているか、まだ行われていません。助けてくれてありがとう！

4

5 に答える 5

13

私が使用している: MarkerClustererPlus-2.0.14 および OverlappingMarkerSpiderfier-version-??

最初はクラスター化のみが機能し、クラスターをクリックしてズームインしますが、まったく同じポイントにある2つ以上のマーカーは、最大にズームインしてもクラスターのままです。残念ながら、スパイダーファイアは現れませんでした:-(。

しかし、markerClusterPlus の setMaxZoom() メソッドに気づきました。これも適切なズームレベル（私にとっては15）に設定すると、スパイダーフィアがズームレベルを超えて引き継ぎます。マーカークラスターは、ここからはもう私の仕事ではないと言っているようです。それはスパイダーファイア次第です:-)。

于 2012-07-23T12:05:08.320 に答える
9

最大ズームを設定すると、問題が解決します。

minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);

ただし、表示目的で、 clusterclick リスナーを作成して、同じ場所にあるポイントのクラスターに実際にズームインしないようにすることができます (クラスターをクリックすると、マップの境界がクラスター内のポイントをカバーするように設定されます。すべてのポイントが同じ場所にある場合は、完全にズームインするため、見栄えが悪くなります):

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
    if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
        map.setZoom(minClusterZoom+1);
});
于 2012-07-24T18:43:11.297 に答える
8

Spiderfier JS を markerClusterer に統合する

  • ここoms.min.jsからファイルをダウンロード
  • markerClusterer.jsとイメージフォルダをここからダウンロードします。

両方を連携させるには、maxZoom を clusterMarker オブジェクトに追加するだけです。

 new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});

(ズームレベル 0 は完全な地球であり、20 はかなり地面に近い)。これは、ズーム レベル 15 でマップをさらにズームインすると (たとえば、クラスターをクリックした場合)、クラスターが表示されなくなることを意味します。まったく同じ場所 (または互いに近い場所) にあるマーカーをクリックすると、Spiderfier JS がトリガーされます。

これは、最小限の作業例に従います。コードにいくつかのコメントを付けたので、それは自明だと思いますが、言及すべき点がいくつかあります。

  • YOUR_API_KEY を API キーに置き換えます
  • oms.min.jsGoogle マップ API をロードした後に必ずロードしてください

例：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script     src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY">
  </script>
  <script src="oms.min.js"></script>
  <script src="markerclusterer.js"></script>
  <script>
    window.onload = function() {
      // cluster marker
      var clusterMarker = [];

      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng( 50, 3),
        zoom: 6,
        mapTypeId: 'terrain'
      });

      // Create infowindow
      var infoWindow = new google.maps.InfoWindow();

      // Create OverlappingMarkerSpiderfier instsance
      var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true});

      // This is necessary to make the Spiderfy work
      oms.addListener('click', function(marker) {
        infoWindow.setContent(marker.desc);
        infoWindow.open(map, marker);
      });

      // Some sample data
      var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];


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

        var point = sampleData[i];
        var location = new google.maps.LatLng(point.lat, point.lng);

        // create marker at location
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });

        // text to appear in window
        marker.desc = "Number "+i;

        // needed to make Spiderfy work
        oms.addMarker(marker);

        // needed to cluster marker
        clusterMarker.push(marker);
      }

      new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
    }
  </script>
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>

おすすめ

ゼロから始める場合は、JS ライブラリリーフレットを使用することをお勧めします。このライブラリは、基本的に Spiderfier が統合されたマーカークラスターであるLeafletMarkerClusterプラグインや、その他多くの優れた機能を提供するためです。

アドバンテージ：

  • クラスタは本当にいいですね
  • リーフレットは本当に使いやすく、きれいに見えます
  • Spiderfier と markerCluster はすでに統合されているため、コードをカスタマイズする必要はありません。
  • いくつかの気の利いた他のもの: マーカーが広がっている領域のホバー時に境界線を表示するようなものです。
  • map-tiles-provider を自由に選択でき、Google マップに制限されなくなりました (可能なプロバイダーはこちら) 。

ダウンサイト:

  • Google API の代わりに Leaflet API を学習して使用するには、30 分の投資が必要になる場合があります。
  • Google マップ タイルを使用する場合は、このプラグインを使用する必要があります。これは、Google API を使用する場合にのみ Google タイルを使用できるためです。このプラグインは、Google API のラッパーです。

コード例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" />
  <script src="leaflet/dist/leaflet.markercluster-src.js"></script>
  <script>
    $(document).ready(function(){

    var tiles = L.tileLayer(***);//Depending on your tile provider

    var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]});

    var markers = new L.MarkerClusterGroup({
      removeOutsideVisibleBounds: true,
      spiderfyDistanceMultiplier: 2,
      maxClusterRadius: 20
    });
    var markersList = [];

    var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];

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

      var point = sampleData[i];
      var location = new L.LatLng(point.lat, point.lng);

      // create marker at location

      var m = new L.Marker(location);
      m.bindPopup("Number" +i); //Text to appear in window
      markersList.push(m);
      markers.addLayer(m);
    }

    var bounds = markers.getBounds();
    map.fitBounds(bounds)
    map.addLayer(markers);
}    
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>
于 2016-06-02T15:36:09.803 に答える
2

まったく同じものを探していたのでこの投稿に出くわしましたが、幸運なことに私はそれを機能させました！

私は正直なところ特別なことは何もしませんでした。MarkerClustererの統合ガイドに従い、次にOverlappingMarkerSpiderfierの統合ガイドに従い、それらは完璧に連携します。

すべて同じアドレスにあるプロパティのクラスターをクリック/ズームインすると、最初は「トップ」マーカーが表示されますが、クリックすると、必要に応じてスパイダーファイします。

2つのスクリプトを一緒に使用しようとすると、どのような具体的な結果が得られますか？

于 2012-03-29T21:47:05.003 に答える
0 
 var markerClusterer = new MarkerClusterer(map, myMarkers, {
 maxZoom: 15,
 zoomOnClick: false
   });
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom 
//turn off zoom on click or spiderfy won't work
于 2015-08-09T13:13:59.900 に答える