谷歌地圖多標記簡單過濾

Question

我已經設置了122個標記，多個類別（12）的Google地圖。我可以根據每個標記使用的圖像創建一個過濾器，以打開/關閉表單中的標記嗎？ 將另一個變量定義爲「類別」變量會更好嗎？ 如果我使用JQuery，如何重構代碼才能使其工作？

任何想法，將不勝感激。

JScript中看起來是這樣的：

function initialize() { 

var myOptions = { 
    center: new google.maps.LatLng(,), 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
};   
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 

var image = [];    //define an array to store category images 
image['church']='icons/chapel-2.png' 
image['monastery']='icons/convent-2.png' 
image['archaeo']='icons/monument.png' 
image['wild']='icons/wildlife.png' 
image['museum']='icons/museum_openair.png' 
image['beach']='icons/beach.png' 
image['must']='icons/star.png' 
image['summit']='icons/peak.png' 
image['cave']='icons/cave-2.png' 
image['forest']='icons/palmTree.png' 
image['gorge']='icons/canyon-2.png' 
image['village']='icons/smallcity.png' 

//define 122 markers as below until var marker122 (no comments here I am trying to keep it simple.. 

     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(,), 
     map: map, 
     title: 'placeName', 
     clickable: true, 
     icon: image['must'] 
}); 

HTML看起來像這樣：

<form action="#"> 
Must Visit: <input type="checkbox" id="mustbox" onclick="boxclick(this,'must')" /> &nbsp;&nbsp; 
      Beaches: <input type="checkbox" id="beachbox" onclick="boxclick(this,'beach')" /> &nbsp;&nbsp; 
      Archaeology: <input type="checkbox" id="archaeobox" onclick="boxclick(this,'archaeo')" /> &nbsp;&nbsp; 
      Church: <input type="checkbox" id="religionnbox" onclick="boxclick(this,'church')" /> &nbsp;&nbsp; 
     Monastery: <input type="checkbox" id="conventbox" onclick="boxclick(this,'convent')" /> &nbsp;&nbsp; 
     Gorge: <input type="checkbox" id="gorgebox" onclick="boxclick(this,'gorge')" /> &nbsp;&nbsp; 
      Cave: <input type="checkbox" id="cavetbox" onclick="boxclick(this,'cave')" /> &nbsp;&nbsp; 
      Forest: <input type="checkbox" id="forestbox" onclick="boxclick(this,'forest')" /> &nbsp;&nbsp; 
      Wildlife: <input type="checkbox" id="wildbox" onclick="boxclick(this,'wild')" /> &nbsp;&nbsp; 
      Museum: <input type="checkbox" id="museumbox" onclick="boxclick(this,'museum')" /> &nbsp;&nbsp; 
     Villages: <input type="checkbox" id="villagebox" onclick="boxclick(this,'village')" /><br /> 
      Mountain Summit: <input type="checkbox" id="summitbox" onclick="boxclick(this,'summit')" /><br /> 

Answer 1

您可以在多個地圖標記上創建過濾器，並且它將非常有效地工作。我已經完成了我的一個項目。哪裏有下拉菜單作爲過濾器，在選定的下拉過濾器值上應用於地圖製作者對象，方法是將其顯示和隱藏設置爲其知名度屬性。 爲此，您可以使用javascript中的集合（數組）。 在開始時，您將所有Google標記對象添加到集合中。當選擇任何過濾器時，只需更改該集合中的地圖標記對象的屬性，就可以更改屬性，如可見性，圖像及其他屬性。你會看到它會非常有效地工作。選擇過濾器時避免創建新對象，這會給地圖帶來不便。

Answer 2

肯定。我做了一些非常相似的事情，但我現在找不到確切的項目。我通過將標記添加到數組，並循環這些數組並顯示/隱藏它們，具體取決於單擊哪些複選框。

// Create an array 
var markersFacebook = []; 

// Create a marker 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(,), 
    map: map, 
    title: 'placeName', 
    clickable: true, 
    icon: image['must'] 
}); 

// Add the marker to an array of your choice. You'll have one for each category 
markersFacebook.push(marker); 

// Now you can show and hide your markers by looping through the array 
function toggleMarkers(visible) 
{ 
    jQuery(markersFacebook).each(function(id, marker) { 
     // Hide or show the marker here depending on the state of a checkbox, or whatever you like 
     marker.setVisible(visible); 
    }); 
} 

toggleMarkers(false); // This should hide all the markers 

抱歉，我不能給你一個完整，工作示例，但陣列的方法應該爲你想達到什麼樣的工作。