SpiderfierJSをmarkerClustererV3に統合して、まったく同じ長さ/緯度のマルチマーカーを爆発させます
私はFilemakerのdbファイルでmarkerCLustererV3を使用して、アドレスに基づいて現在の配信場所の（セミライブ）マップを生成しています。グーグルから緯度/経度を取得し、それらのフィールドに入力することは問題ありません。 markerClustererを介してマップを生成することは問題ありません。 JSをローカルでホストしているので、maxZoom変数を変更して、クラスターを最大ズームより上に分割し、複数のマーカーを表示できます。ただし、マーカーがまったく同じ緯度/長さであるため、最後に入力されたマーカーしか表示されません。 OverlappingMarkerSpiderfierをこのJSに統合して、maxZoomを超えてズームインした後、マーカーが「スパイダー」してマーカーが表示されるようにします（例として、複数の機器が同じアドレスに配信されます）。これを行う方法については、Web上で情報を見つけることができません。それはとても単純で、私はそれを見逃しているか、まだ行われていないかのどちらかです。助けてくれてありがとう！
私が使用しているもの：MarkerClustererPlus-2.0.14およびOverlappingMarkerSpiderfier-version- ??
最初はクラスタリングのみが機能し、クラスターをクリックしてズームインしますが、最大にズームインしても、まったく同じポイントにある2つ以上のマーカーがクラスターのままになります。残念ながら、スパイダーファイアは現れませんでした:-(。
しかし、markerClusterPlusのsetMaxZoom（）メソッドに気づいたよりも。これも適切なズームレベル（私にとっては15）に設定すると、スパイダーファイアがズームレベルを超えて引き継ぎます。マーカークラスターは、これからはもう私のビジネスではないと言っているようですが、それはスパイダーファイア次第です:-)。
最大ズームを設定すると、問題が解決します。
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);
});
Spiderfier JSをmarkerClustererに統合する
両方を連携させるには、clusterMarkerオブジェクトにmaxZoomを追加するだけです。
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
（ズームレベル0は完全な地球であり、20は地面にかなり近いです）。これは、ズームレベル15としてマップをさらにズームインすると（たとえば、クラスターをクリックした場合）、クラスターは表示されなくなることを意味します。ここで、まったく同じ場所にある（または互いに近い）マーカーをクリックすると、SpiderfierJSがトリガーされます。
これは、最小限の作業例に従います。私はコードにいくつかコメントをしたので、それは自明だと思いますが、ここにいくつか言及することがあります：
- YOUR_API_KEYをAPIキーに置き換えます
- グーグルマップAPIをロードした後、必ず
oms.min.jsをロードしてください
例：
<!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 Libary Leaflet を使用することをお勧めします。このライブラリは、LeafletMarkerClusterプラグインを提供します。これは、基本的にSpiderfierが統合されたmarkerclusterであり、他にも多くの優れた機能があります。
利点：
- クラスターは本当に素敵に見えます
- リーフレットは本当に使いやすく、きれいに見えます
- SpiderfierとmarkerClusterはすでに統合されているため、コードをカスタマイズする必要はありません。
- いくつかの派手な他のもの：マーカーが広がっている領域のホバーに境界線を表示するようなもの。
- Map-tiles-providerを自由に選択でき、Googleマップに制限されなくなりました（ ここで可能なプロバイダー ）
ダウンサイト：
- GoogleAPIの代わりにLeafletAPIを学習して使用するには、30分を投資する必要がある場合があります
- Google Map Tilesを使用する場合は、これを使用する必要があります plugin 。これは、GoogleAPIを使用する場合にのみGoogleTilesを使用できるためです。このプラグインは、GoogleAPIのラッパーです。
コード例は次のとおりです。
<!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>
まったく同じものを探していたのでこの投稿に出くわしましたが、幸運にもそれを機能させることができました！
私は正直なところ特別なことは何もしませんでした。MarkerClustererの統合ガイドに従い、次にOverlappingMarkerSpiderfierの統合ガイドに従い、それらは完璧に連携します。
すべて同じアドレスにあるプロパティのクラスターをクリック/ズームインすると、最初は「トップ」マーカーが表示されますが、クリックすると、必要に応じてスパイダーファイします。
2つのスクリプトを一緒に使用しようとすると、どのような具体的な結果が得られますか？
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