2

我已经建立了一个带有 122 个标记、多个类别 (12) 的谷歌地图。我可以根据每个标记使用的图像创建一个过滤器，以便打开/关闭表单中的标记吗？将另一个变量定义为“类别”变量会更好吗？如果我使用 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 />

4

2 回答 2

1

您可以在多个地图标记上创建过滤器，它将非常有效地工作。我已经在我的一个项目中做到了。在有下拉列表作为过滤器的情况下，通过将显示和隐藏设置为其可见性属性，将下拉过滤器的选定值应用于地图制作者对象。为此，您需要在 javascript 中使用 collection(array)。在开始时，您将所有 google 标记对象添加到集合中。When any filter is selected, then just change the property of map marker object from that collection, you can change property like visibility, image and its other property. 你会看到它会非常有效地工作。避免在选择过滤器时创建新对象，这会给地图带来不平滑。

于 2013-06-20T11:49:18.863 回答
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

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

于 2013-06-20T11:30:45.520 回答