Интеграция Spiderfier JS в markerClusterer
- Загрузите файл
oms.min.js из здесь - Загрузите
markerClusterer.js и image папка из здесь
Чтобы заставить оба работать вместе, вам нужно всего лишь добавить maxZoom в объект clusterMarker
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
(Zoomlevel 0 - полная земля, а 20 довольно близко к земле).Это означает, что если вы увеличите масштаб карты до уровня 15 (например, если щелкнуть кластер), кластеры больше не будут отображаться.Если вы теперь нажмете на маркеры, которые находятся в одном и том же месте (или близко друг к другу), сработает Spiderfier JS.
Теперь следует минимальный рабочий пример.Я сделал несколько комментариев в коде, так что я думаю, что он не требует пояснений, но вот некоторые вещи, на которые стоит обратить внимание:
- Замените YOUR_API_KEY на ваш ключ API
- Убедитесь, что загружен
oms.min.js после загрузки Google Maps 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 Libary Leaflet .Потому что эта библиотека предоставляет вам плагин LeafletMarkerCluster , который в основном является markercluster со встроенным Spiderfier, и множество других интересных вещей.
Преимущество:
- Кластер выглядит очень красиво
- Листовка действительно проста в использовании и выглядит красиво
- Вам не нужно настраивать код, потому что Spiderfier и markerCluster уже интегрированы
- Некоторыедругие интересные вещи: например, отображение границы при наведении на область, где расположен маркер.
- Вы можете свободно выбирать провайдера map-tile и больше не ограничены гугл картами ( возможных провайдеров здесь )
Даунсайты:
- Возможно, вам придется потратить 30 минут на изучение и использование Leaflet API вместо Google API
- Если вы хотитечтобы использовать Google Map Tiles, вам нужно использовать этот плагин , потому что вы можете использовать Google Tiles только при использовании Google API.Этот плагин является оболочкой для 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>