Как отображать несколько маркеров с одинаковыми координатами в API Карт Google?

У меня несколько адресов на одной улице с одним номером дома, но с разными номерами квартир. Служба геокодирования Google Maps (v2) не снижает точность на уровне квартир для многих адресов и просто вернула мне те же координаты геокода для них.

Итак, проблема в том, что когда я иду отображать их, появляется только одна канцелярская кнопка, независимо от того, насколько сильно вы увеличиваете масштаб. И мой вопрос: каков хороший способ отобразить несколько канцелярских кнопок по одному и тому же адресу дома? Я видел, как craigslist.org создает спираль из канцелярских кнопок на своей новой функции карты, но мне было интересно, какие у меня есть другие варианты, поскольку в лучшем случае это похоже на обходной путь.

Идеи?


google-maps google-maps-api-3 google-maps-markers overlapping-matches pushpin
person johntrepreneur    schedule 09.01.2013    source источник
comment
Взгляните на markerclusterer.   -  person Dr.Molle    schedule 10.01.2013
comment
@Dr.Molle Я видел это, но это масштабирование для кластеризации. Это означает, что в уменьшенном виде он объединяет кластеры, но когда вы начинаете увеличивать масштаб, они перемещаются в разные места. Моя проблема в том, что у меня все еще есть один маркер, если вы полностью увеличите масштаб.   -  person johntrepreneur    schedule 10.01.2013
comment
когда вы удалите свойство maxZoom, у вас все равно будет кластер, а не маркеры в той же позиции.   -  person Dr.Molle    schedule 10.01.2013
comment
как насчет того, чтобы установить радиус кластера, связанный с масштабированием, если масштаб приближается к максимальному масштабу, радиус должен быть узким   -  person Kotzilla    schedule 10.01.2013
comment
@Dr.Molle - Хорошо, я изменил простой пример, предоставленный markerclusterer (в котором не определено свойство maxZoom), используя 3 маркера с одинаковыми координатами, и это поведение не очень хорошо для этой цели. Он продолжает увеличивать масштаб, отображая маркер группы полностью вниз, пока не достигнет максимального уровня масштабирования, а затем, если вы щелкнете по нему еще раз, он исчезнет, ​​оставив только пустую карту. Не совсем то, что я ищу.   -  person johntrepreneur    schedule 11.01.2013
comment
@Dr.Molle - я больше думал о слегка настраиваемой канцелярской кнопке с числом в ней, представляющим количество совпадений в этой точке (), у которого есть некоторые встроенные функции для обработки этого последнего щелчка, когда он полностью увеличен (или, возможно, ваш собственный функционируют там).   -  person johntrepreneur    schedule 11.01.2013
comment
все это можно сделать с помощью markerclusterer   -  person Dr.Molle    schedule 11.01.2013
comment
@Dr.Molle — после тщательного использования и интеграции markerclustererplus на свой сайт, я могу с уверенностью сказать, что он не соответствует описанному выше сценарию. Однако вы можете сделать так, чтобы значок кластера отображался вплоть до самого высокого уровня масштабирования, но это не указывает пользователю на наличие нескольких маркеров/булавок в одном и том же месте; просто маркеры расположены близко друг к другу и сгруппированы по значку кластера.   -  person johntrepreneur    schedule 25.01.2013
comment
@Dr.Molle. Если есть способ, укажите конкретный параметр конфигурации в страница конфигурации markerclustererplus.   -  person johntrepreneur    schedule 25.01.2013
comment
@Dr.Molle - Эй, спасибо за ссылку на markerclusterer. Это было именно то, что я искал!   -  person Jonathan Wilson    schedule 17.07.2013
comment
взгляните на OverlappingMarkerSpiderfier code, демонстрация   -  person Igor Milla    schedule 27.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я решил эту проблему, используя значки динамических диаграмм Google, которые позволяют размещать число в булавке, указывающее, что в этой точке есть несколько маркеров. По сути, вы вызываете их URL-адрес «диаграммы» с некоторыми параметрами запроса, и они возвращают вам ваш пронумерованный значок, который вы затем можете поместить/установить в существующем маркере, который у вас есть на этом месте.

var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);

function createMarkerImage(text)
{
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));
    return pinImage;
}

ПРИМЕЧАНИЕ. В этом решении используется устаревший API Google, дата окончания которого не указана.

«Важно: с 20 апреля 2012 года часть графических изображений Google Chart Tools официально устарела. Она будет продолжать работать в соответствии с нашей политикой прекращения поддержки».


ОБНОВЛЕНИЕ:
Я отказался от приведенного выше решения, поскольку оно устарело (и оказывает влияние на производительность многих маркеров) вместо того же конечного эффекта, что и пронумерованный маркер, но с использованием путь координат, определяющий многоугольник в форме маркера вместе с .png для тени маркера. Единственная причина, по которой я использовал свой собственный маркер, заключается в том, что мне нужно было создать отдельные маркеры, каждый с уникальным цветом (и, возможно, со встроенным номером), которые ванильные маркеры не поддерживают.

person johntrepreneur    schedule 25.01.2013