Question

我已经设置了一个包含122个标记的谷歌地图，多个类别（12）。我可以根据每个标记使用的图像创建过滤器，以便从表单中打开/关闭标记吗？将另一个变量定义为＆＃34;类别＆＃34;会更好吗？变量？如果我使用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

不确定。我做了一些非常相似的事情，但我现在找不到确切的项目。我是通过将标记添加到数组并循环遍历这些数组并根据单击的复选框显示/隐藏它来实现的。

// 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

抱歉，我无法给你一个完整的，有效的例子，但阵列方法应该适用于你想要实现的目标。

Answer 2

您可以在多个地图标记上创建过滤器，它将非常有效。我已经完成了我的项目之一。如果有一个下拉列表作为过滤器，则选定的下拉过滤器值将应用于地图制作者对象，方法是设置简单显示并隐藏其可见性属性。要做到这一点，你在javascript中使用集合（数组）。在开始时，您将所有Google标记对象添加到集合中。选择任何过滤器后，只需从该集合中更改地图标记对象的属性，即可更改属性，如可见性，图像及其他属性。你会发现它会非常有效。避免在选择过滤器时创建新对象，它会给地图带来不平滑。

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

2 个答案: