Javascript 切换隐藏/显示谷歌地图标记_Javascript_Google Maps_Google Maps Api 3_Google Maps Markers

Javascript 切换隐藏/显示谷歌地图标记

javascript google-maps google-maps-api-3

Javascript 切换隐藏/显示谷歌地图标记,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,我有一个自定义的谷歌地图，上面有艺术家位置的标记。我想制作8种不同类别的标记。我读过关于必须制作标记数组和指定类别的文章，但我真的不知道从哪里开始我认为这个问题接近我想要的： . 我试着让它工作，但没用，我只是知识太少了这是我的HTML。我有一张地图和一些复选框准备好了，这些复选框还没有被使用 <body onload="initialize()"> <div id="map_container"> <div id="map_canvas" style

我有一个自定义的谷歌地图，上面有艺术家位置的标记。我想制作8种不同类别的标记。我读过关于必须制作标记数组和指定类别的文章，但我真的不知道从哪里开始

我认为这个问题接近我想要的： . 我试着让它工作，但没用，我只是知识太少了

这是我的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);
});

}

函数初始化（）{
var latlng=新的google.maps.latlng（52.0840356,5.1546501）；
变量设置={
缩放：13，
中心：拉特林，
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），设置）；
var contentString=''+
''+
''+
“Høgenhaug”+
''+
“Lorem ipsum door sit amet，一位杰出的职业经理人，他是一位临时雇员和一位杰出的职业经理人。他是一位非常富有经验的人，他在一次实习中，为一位普通消费者提供了一份工作。”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});
var cat1Shadow=new google.maps.MarkerImage（'images/shadow.png'，
新谷歌地图尺寸（130,50），
新google.maps.Point（0,0），
新谷歌地图点（65,50）
);
var cat1Icon=new google.maps.MarkerImage（'images/beelend.png'，
新谷歌地图大小（100,50），
新google.maps.Point（0,0），
新谷歌地图点（50,50）
);
var art1Pos=new google.maps.LatLng（52.0840356,5.1546501）；
var art1Marker=新的google.maps.Marker({
职位：第1方，
地图：地图，
图标：cat1Icon，
阴影：CAT1阴影，
标题：“Beeldende kunst”，
zIndex:4
});
google.maps.event.addListener（art1Marker，'click'，function（）{
信息窗口。打开（地图、艺术市场）；
});
}

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

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

谢谢

创建不同标记数组的最佳方法是这样做。你说你有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}
            });

而您的hideMarkers（）函数将使用此命令使其不可见

marker.setVisible(false);

希望这对您有所帮助

您可以将它们存储在一个数组中，并使用marker.setMap（null）切换可见性以表示不可见，使用marker.setMap（map）切换可见性以表示可见

参见文档中的示例：

我尝试了这一点（现在我对数组的理解更好了），但是我遇到了很多错误，比如“marker未定义”、“locationsCA未定义”和“iconArray未定义”。嗯，您不能只运行代码段。正如您所说，locationsCA和iconArray没有定义，所以您必须定义它们。至于marker未定义，这可能意味着您尚未使用label定义marker，在这种情况下，只需删除整个label部分。请记住，大多数marker选项都是可选的，除了icon、Dragable、labelAnchor等。所需选项是position和map:map。我想我还没有准备好进行此实验，它只是猜测和随机移动代码片段。。这是我第一次使用google maps api，我想这超出了我的想象：）@krikara谢谢你的回答。仅供参考，addListener（）代码段缺少结尾）；在上面，为我工作。唯一需要额外做的事情是——如果标记上有动画，则必须在setMap（map）之后再次设置，因为它似乎在setMap（null）上未设置。

marker.setVisible(false);