Подтвердить что ты не робот

Интеграция Spiderfier JS в markerClusterer V3 для взорвания многомаркеров с точно такими же длинными/лат

Я использую markerCLusterer V3 в файле db от Filemaker для создания (полуживой) карты текущих местоположений доставки, основанных на адресах. Захват lat/long от Google и заполнение этих полей не проблема. Создание карты через markerClusterer не представляет проблемы. Я даже размещаю JS локально, так что я могу изменить переменную maxZoom, чтобы разбить кластеры выше максимального масштабирования, чтобы я мог видеть несколько маркеров. Тем не менее, с маркерами ровно один и тот же lat/long, я могу видеть только последний введенный. Я хотел бы объединить OverlappingMarkerSpiderfier в этот JS, чтобы после того, как я увеличил масштаб до maxZoom, маркеры будут "размахивать" отдельно, чтобы увидеть маркеры (например, несколько единиц оборудования, доставляемых по тому же адресу). Я не могу найти здесь какую-либо информацию в Интернете о том, как это сделать. Это либо просто, и я скучаю по нему, либо еще не сделано. Заранее благодарим за помощь!

4b9b3361

ОТВЕТЫ

Ответ 1

Я использую: MarkerClustererPlus-2.0.14 и OverlappingMarkerSpiderfier-версия -??

Сначала только работа кластеризации, щелчок по кластеру, увеличивается, но 2 или более маркеров в одной и той же точке все еще остаются кластером, даже если он увеличен до максимума. К сожалению, ни один человек с пауком не появился:-(.

Но чем заметил метод setMaxZoom() на markerClusterPlus. При установке этого слишком соответствующего уровня масштабирования (15 для меня) spiderfier выходит за пределы уровня масштабирования. Похоже, что markerClusters говорит, что это не мое дело больше отсюда на нем до spiderfier:-).

Ответ 2

Установка максимального масштабирования устраняет проблему:

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);
});

Ответ 3

Я столкнулся с этим сообщением, потому что искал то же самое, но мне повезло, что я сделал это!

Я честно ничего особенного не делал, я следил за руководством по интеграции для MarkerClusterer, а затем следил за руководством по интеграции OverlappingMarkerSpiderfier, и они работают безупречно вместе.

Когда я нажимаю/увеличиваю в кластере свойств, которые находятся на одном и том же адресе, сначала он показывает только "верхний" маркер, но когда я нажимаю на него, они Spiderfy точно так же, как вы хотели бы их тоже!

Какой конкретный результат вы получаете, когда пытаетесь использовать два сценария вместе?

Ответ 4

Интеграция Spiderfier JS в markerClusterer

  • Загрузите oms.min.js файл из здесь
  • Загрузите папку markerClusterer.js и изображение из здесь

Чтобы обе команды работали вместе, вам нужно добавить 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 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. Поскольку эта библиотека предоставляет вам плагин возможные поставщики здесь)

Downsites:

Вам может потребоваться инвестировать 30 минут, чтобы изучить API-интерфейс Leaflet вместо API Google Если вы хотите использовать Google Map Tiles, вам нужно использовать этот плагин, потому что вам разрешено использовать Google Tiles при использовании API Google. Этот плагин является оберткой для API Google.

Вот пример кода:

<!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>

Ответ 5

 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