谷歌地图多个标记简单过滤

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 中使用 collection(array)。 在开始时，您将所有 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

抱歉，我无法为您提供一个完整的、有效的示例，但数组方法应该适用于您想要实现的目标。