Google maps API V3 - несколько маркеров на одном и том же месте

немного застрял на этом. Я получаю список гео-координат через JSON и помещаю их на карту google. Все работает хорошо, за исключением случая, когда у меня есть два или более маркеров на одном и том же месте. API отображает только 1 маркер - верхний. Это достаточно справедливо, я полагаю, но хотел бы найти способ показать их все как-то.

Я искал google и нашел несколько решений, но они в основном, похоже, для V2 API или просто не так велики. В идеале Я хотел бы решение, где вы нажимаете какой-то групповой маркер, а затем показывает маркеры, сгруппированные вокруг места, в котором они все находятся.

У кого - нибудь была эта проблема или аналогичная и хотели бы поделиться решением?

98
google-maps google-maps-api-3 javascript

3 ответов

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

но реальный пример жизни с маркерами на том же самом месте можно увидеть на http://www.ejw.de/ejw-vor-ort/ (прокрутите вниз для карты и нажмите на несколько маркеров, чтобы увидеть паук-эффект).

Это кажется идеальным решением для твоя проблема.

107

смещение маркеров не является реальным решением, если они расположены в одном здании. Что вы можете сделать, это изменить markerclusterer.js так:

  1. добавьте метод click прототипа в класс MarkerClusterer, например - мы переопределим это позже в функции map initialize ():

    MarkerClusterer.prototype.onClick = function() { 
    return true; 
};

  2. в классе ClusterIcon добавьте следующий код после clusterclick триггер:

    // Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

var zoom = this.map_.getZoom();
var maxZoom = markerClusterer.getMaxZoom();
// if we have reached the maxZoom and there is more than 1 marker in this cluster
// use our onClick method to popup a list of options
if (zoom >= maxZoom && this.cluster_.markers_.length > 1) {
   return markerClusterer.onClickZoom(this);
}

  3. затем в функции initialize (), где вы инициализируете карту и объявляете объект MarkerClusterer:

    markerCluster = new MarkerClusterer(map, markers);
// onClickZoom OVERRIDE
markerCluster.onClickZoom = function() { return multiChoice(markerCluster); }

    где multiChoice () - ваша (еще не написанная) функция для всплывающего окна с списком опций для выбора. Обратите внимание, что объект markerClusterer передается функции, так как это необходимо для определения количества маркеров в кластере. Для пример:

    function multiChoice(mc) {
     var cluster = mc.clusters_;
     // if more than 1 point shares the same lat/long
     // the size of the cluster array will be 1 AND
     // the number of markers in the cluster will be > 1
     // REMEMBER: maxZoom was already reached and we can't zoom in anymore
     if (cluster.length == 1 && cluster[0].markers_.length > 1)
     {
          var markers = cluster[0].markers_;
          for (var i=0; i < markers.length; i++)
          {
              // you'll probably want to generate your list of options here...
          }

          return false;
     }

     return true;
}
31

расширения Chaoley это, я реализовал функцию, которая, учитывая перечень мест (объектов с lng и lat properties), координаты которых точно такие же, немного смещает их от исходного местоположения (изменение объектов на месте). Тогда они образуют красивый круг вокруг центральной точки.

я обнаружил, что для моей широты (52deg North), 0.

13