谷歌地圖API（3）

Question

附加選擇一旦我使用谷歌地圖API創建了具有多個標記的地圖，我想要額外的選擇來突出顯示標記的子集。我想這樣做，而不會回到服務器。最好我想將數據存儲在標記或數組中。我可以用新標記替換或在標記頂部覆蓋圖像。任何人都可以提出如何做到這一點的例子 - 特別是關於添加圖像或更改標記的部分。

下面的例...

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部分：讓我們顯示所有折扣店，並隱藏所有其他標記，當有人點擊按鈕時

我假設你有一個ID爲'折扣'的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); 
    } 
    } 
});