Question

我有点卡在试图告诉Javascript做我想做的事。

我有一个示例地图http://calwestcultural.com/sgs/backup/example-map.html，我在左边的spry菜单中有类别。我希望这些类别可以点击，只显示该类别的标记。

我想： 1.加载时隐藏标记 2.当您点击某个类别（例如“吃”“银行”等）时，我只想显示该类别中的标记

*如果在菜单中创建一个复选框使这更容易，我愿意这样做。我只是挂在地图的这一部分上，需要继续前进。

任何人都可以帮忙吗？有些东西告诉我这是一个简单的解决方法。

Answer 1

如果您想将标记保存在不同的类别中，请为每个标记类别创建一个数组，并使用它们存储每组标记。然后执行以下操作：

要在加载时隐藏标记，请创建标记，但将标记贴图属性设置为null：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: null,
    title:"Hello World!"
});

要仅显示给定类别中的标记，请侦听应触发标记显示的事件，然后设置标记＆＃39;地图属性：

for ( var i = 0; i < markerCategoryArray.length; i++ ) {
    markerCategoryArray[i].setMap( map );
}

Answer 2

我从this answer获得了如何在没有多个类别数组的情况下执行此操作的线索。更重要的是，google maps v3 example linked显示了以下内容。

var gmarkers = [];
var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[category],
    shadow: iconShadow,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;                                 
marker.myname = name;
gmarkers.push(marker);

然后只按标记上的类别进行过滤，如exmaple所示。

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
   for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(true);
      }
   }
   // == check the checkbox ==
   document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
   for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(false);
      }
   }
   // == clear the checkbox ==
   document.getElementById(category+"box").checked = false;
   // == close the info window, in case its open on a marker that we just hid
   infowindow.close();
}

选择“链接”或“复选框”以显示“类别标记”

2 个答案: