Вот пример, который предполагает, что когда вы загружаете свою страницу, эти данные возвращаются с сервера в формате JSON.
data = [{широта: 103,2, долгота: 12,3, isDiscountOutlet: false}, {широта: 101,2, долгота: 11,3, isDiscountOutlet: false}]
Основной подход заключается в том, что мы сохраняем эти данные в браузере и используем их для обновления внешнего вида маркеров при изменении выделения.
Часть 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);
}
}
});
02.05.2015
