дополнительные выборы в Google maps api (3)

Question

Как только я создал карту с несколькими маркерами, используя API-интерфейс Google Maps, я хочу добавить дополнительные выделения, чтобы выделить подмножество отображаемых маркеров. Я хотел бы сделать это, не возвращаясь на сервер. Я предпочитаю хранить данные в маркерах или массивах. Я мог бы либо заменить новый маркер, либо наложить изображение поверх маркера. Может ли кто-нибудь предложить пример того, как это сделать - в частности, о добавлении маркера изображения или изменения.

Пример ниже ...

Answer 1

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

данные = [{ широта: 103,2, долгота: 12.3, isDiscountOutlet: ложные }, { широта: 101,2, долгота: 11.3, isDiscountOutlet: ложные } ]

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

Часть 1: Создание глобальной переменной для хранения наших маркеров в

var storedMarkers; 

Часть 2: Создание карты с использованием данных от сервера

function initialize() { 
    var mapOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(103, 11) 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    // Add the markers. We are going to store them in a global array too, 
    // so we can access them later. 
    for (var i = 0; i < data.length; ++i) { 

    // Create one marker for each piece of data. 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(data[i].latitude, data[i].longitude), 
     map: map 
    }); 

    // Store that marker, alongside that data. 
    var dataToStore = { 
     markerObject: marker, 
     dataAssociatedWithMarker: data[i] 
    }; 

    storedMarkers.push(dataToStore); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Часть 3: Давайте покажем все дисконтные магазины и спрячем все остальные маркеры, когда кто-то нажимает кнопку

Я предполагаю, что у вас есть элемент DOM (кнопка) с идентификатором «скидка». Я также собираюсь обмануть и использовать jQuery :)

$("#discount").click(function() { 
    for (var i = 0; i < storedMarkers.length; ++i) { 
    var currentStoredMarker = storedMarkers[i]; 

    // Is this marker a discount outlet? 
    if (currentStoredMarker.dataAssociatedWithMarker.isDiscountOutlet == true) { 
     // Let's show it! 
     currentStoredMarker.markerObject.setVisible(true); 
    } else { 
     // Let's hide it! 
     currentStoredMarker.markerObject.setVisible(false); 
    } 
    } 
});