Отображение множества маркеров на Google Картах - PullRequest
Новая
       22

Отображение множества маркеров на Google Картах

18 голосов
/ 24 марта 2011

У меня есть эта карта, и я хочу показать целую кучу маркеров. Но мне нужно найти способ показать это упорядоченно, и хорошо ... что-то круто было бы неплохо Хорошо, что у Google Maps есть много интересных функций. Но я новичок в его использовании и, скорее всего, не знаю крутых вариантов организации маркеров и контента. Я просто наткнулся на один аккуратный путь, который я опубликую ниже.

Но чтобы узнать о решениях, которые нашли / создали другие, мой вопрос: каковы классные способы показать большую группу маркеров?

Ответы [ 2 ]

21 голосов
/ 09 апреля 2011

Вот документация для MarkerClusterer для Карт Google V3

примеры проверки MarkerClusterer для Google Maps V3 Образцы кодов

Может группировать вашимаркеры, чтобы их было легче просматривать.

Вот пример использования MarkerClusterer JSFiddle Demo. 

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red10.png',
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;

Снимок экрана того, как это выглядит сгруппировано:

enter image description here

4 голосов
/ 24 марта 2011

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

Google Map Slider , на основе этой реализации.

Особенности: автоматическая прокрутка при наведении курсора на внешнюю область с подробной информацией о том, что находится на карте. Позволяет вам публиковать и показывать гораздо больше информации, но все же связать ее с картой.

...