1

我有点坚持试图告诉 Javascript 做我想做的事。

我有一个示例地图http://calwestculture.com/sgs/backup/example-map.html并且左侧的快速菜单中有类别。我希望这些类别是可点击的，并且只显示该类别的标记。

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

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

有人可以帮忙吗？有人告诉我这是一个简单的解决方法。

4

2 回答 2

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!"
});

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

for ( var i = 0; i < markerCategoryArray.length; i++ ) {
    markerCategoryArray[i].setMap( map );
}
于 2012-06-05T17:44:35.177 回答
0

在没有多个类别数组的情况下，我从这个答案中得到了一个关于如何做到这一点的线索。更重要的是，那里链接的谷歌地图 v3 示例显示了以下内容。

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);

然后只需按示例中描述的标记上的类别进行过滤。

// == 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();
}
于 2012-10-31T16:29:19.293 回答