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

Question

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

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

Кто-нибудь имел эту проблему или подобное и хотел бы поделиться решением?

Answer 1

Мне нравятся простые решения, так что вот мое. Вместо того, чтобы модифицировать библиотеку, из-за которой было бы труднее поддерживать. Вы можете просто посмотреть событие, как это

google.maps.event.addListener(mc, "clusterclick", onClusterClick);

тогда вы можете управлять им на

function onClusterClick(cluster){
    var ms = cluster.getMarkers();

i, т.е. использовал bootstrap для отображения панели со списком. который я нахожу гораздо более удобным и удобным, чем паутинка в «людных» местах. (если вы используете кластеризатор, у вас могут возникнуть коллизии после паутинки). Вы также можете проверить увеличение там.

кстати. я только что нашел листовку, и она, кажется, работает намного лучше, кластер и spiderfy работает очень плавно http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html и это с открытым исходным кодом.

Answer 2

Добавляя к хитрому гениальному ответу Мэтью Фокса, я добавил небольшое случайное смещение для каждого широты и lng при установке объекта маркера. Например:

new LatLng(getLat()+getMarkerOffset(), getLng()+getMarkerOffset()),

private static double getMarkerOffset(){
    //add tiny random offset to keep markers from dropping on top of themselves
    double offset =Math.random()/4000;
    boolean isEven = ((int)(offset *400000)) %2 ==0;
    if (isEven) return  offset;
    else        return -offset;
}

Answer 3

Как с этим справиться .. [Swift]

    var clusterArray = [String]()
    var pinOffSet : Double = 0
    var pinLat = yourLat
    var pinLong = yourLong
    var location = pinLat + pinLong

Новый маркер готовится к созданию?проверьте clusterArray и управляйте его смещением

 if(!clusterArray.contains(location)){
        clusterArray.append(location)
    } else {

        pinOffSet += 1
        let offWithIt = 0.00025 // reasonable offset with zoomLvl(14-16)
        switch pinOffSet {
        case 1 : pinLong = pinLong + offWithIt ; pinLat = pinLat + offWithIt
        case 2 : pinLong = pinLong + offWithIt ; pinLat = pinLat - offWithIt
        case 3 : pinLong = pinLong - offWithIt ; pinLat = pinLat - offWithIt
        case 4 : pinLong = pinLong - offWithIt ; pinLat = pinLat + offWithIt
        default : print(1)
        }


    }

результат

Answer 4

Проверьте это: https://github.com/plank/MarkerClusterer

Это MarkerCluster, модифицированный, чтобы иметь информационное окно в маркере кластера, когда у вас есть несколько маркеров в одной позиции.

Вы можете увидеть, как этоработает здесь: http://culturedays.ca/en/2013-activities

Answer 5

Задание смещения приведет к удалению маркеров при увеличении пользователем до макс.Так что я нашел способ достичь этого.это может быть не совсем правильно, но это сработало очень хорошо.

// This code is in swift
for loop markers
{
//create marker
let mapMarker = GMSMarker()
mapMarker.groundAnchor = CGPosition(0.5, 0.5)
mapMarker.position = //set the CLLocation
//instead of setting marker.icon set the iconView
let image:UIIMage = UIIMage:init(named:"filename")
let imageView:UIImageView = UIImageView.init(frame:rect(0,0, ((image.width/2 * markerIndex) + image.width), image.height))
imageView.contentMode = .Right
imageView.image = image
mapMarker.iconView = imageView
mapMarker.map = mapView
}

установите zIndex маркера так, чтобы вы видели значок маркера, который вы хотите видеть сверху, в противном случае он будет анимировать маркерыкак автоматическая замена.когда пользователь коснется маркера, обработайте zIndex, чтобы поднять маркер сверху, используя zIndex Swap.

Answer 6

Расширяя приведенные выше ответы, когда вы получили соединенные строки, а не добавленную / вычтенную позицию (например, "37.12340-0.00069"), преобразуйте исходную широту / долготу в значения с плавающей точкой, например, используя parseFloat (), затем добавьте или вычтите поправки.

Answer 7

Расширяя ответы, приведенные выше, просто убедитесь, что вы установили параметр maxZoom при инициализации объекта карты.