2

我有一个带有艺术家位置标记的自定义谷歌地图。我想制作 8 种不同类别的标记。我读到必须制作标记数组并分配类别，但老实说，我不知道从哪里开始..

我认为这个问题接近我想要的： Toggle on/off Google map markers by category。试图让它发挥作用，但无济于事，我的知识太少了。

这是我的 HTML。我准备好了地图和几个复选框，这些复选框还没有使用。

<body onload="initialize()">

<div id="map_container">
    <div id="map_canvas" style="width:700px; height:350px">
    </div>
</div>

<div id="map_filter">
    <form action="#">
      <input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br />
      <input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br />
      <input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label>
    </form> 
</div>

</body>

这是我的 JS。我有一个 cat1 阴影和 cat1 图标，应该是 8 种不同的类型，但这可能不是这样做的方法，所以为了便于阅读，我只保留了一只猫。然后我有一个标记（art1），它有自己的位置、阴影等。

function initialize() {
var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
var settings = {
    zoom: 13,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);

var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);

var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
var art1Marker = new google.maps.Marker({
    position: art1Pos,
    map: map,
    icon: cat1Icon,
    shadow: cat1Shadow,
    title:"Beeldende kunst",
    zIndex: 4
});

google.maps.event.addListener(art1Marker, 'click', function() {
  infowindow.open(map,art1Marker);
});

}

那么.. 创建不同的标记数组并使用复选框切换其可见性的最佳方法是什么？

另外，我希望能够为标记分配地址，而不是查找坐标。

谢谢

4

2 回答 2

6

创建不同的标记数组的最好方法是做这样的事情。你说你有 8 类标记，所以这样做 8 次。

var locations = [

                 ['Shanghai', 31.232, 121.47, 5885],
                 ['Beijing', 39.88, 116.40, 6426],
                 ['Guangzhou', 23.129, 113.264, 4067],
                 ['Shenzhen', 22.54, 114.05, 3089],
                 ['Hangzhou', 30.27, 120.15, 954],
                 ['Hong Kong', 22.39, 114.10, 1885]
               ];

function getMarkers() {
    for (i = 0; i < locations.length; i++) { 
            marker[i] = new MarkerWithLabel({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                draggable: false,
                map: map,
                    labelContent: locationsCA[i][3],
                icon: new google.maps.MarkerImage(iconArray[i]),
                labelAnchor: new google.maps.Point(30, 0),
                labelClass: "labels", // the CSS class for the label
                 labelStyle: {opacity: 0.75}
            });

至于您关于使用复选框切换可见性的第二个问题，我不知道如何制作复选框，但切换功能可以通过事件触发器轻松实现。无论是标记单击或缩放，还是任何其他事件（查看事件文档），您都会在该事件之后设置一个操作。这是一个例子。

google.maps.event.addListener(map,'zoom_changed',function () {
         if (map.getZoom() >= 4) {
            hideMarkers();          
         }
}

并且您的 hideMarkers() 函数使用此命令使其不可见

marker.setVisible(false);

希望有帮助

于 2012-06-21T16:22:18.637 回答
1

您可以将它们存储在一个数组中，并使用 marker.setMap(null) 为不可见和 marker.setMap(map) 为可见切换可见性。

查看文档中的示例： https ://developers.google.com/maps/documentation/javascript/examples/marker-remove

于 2016-01-14T16:48:32.683 回答