Javascript 如何制作隐藏和显示标记的按钮？

在GoogleMaps中，我希望有隐藏和显示地图标记的按钮，但我需要有多个按钮，每个按钮都有自己的标记集。例如，按钮1将显示和隐藏标记1和3，而按钮2将显示和隐藏标记2和4

这对我来说有点难，因为我是api v3的新手

这是我的密码

  function initialize() {

    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(-8.762472, -63.887951),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP       });


  var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-8.759662,-63.906489),      
      icon:  predio});


   var infowindow    =  new google.maps.InfoWindow({
  content:contentimage})
 google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker); });


var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-8.766159,-63.889567),      
      icon:  yellow});


  var infowindow1    =  new google.maps.InfoWindow({
 content:contentimage1})
   google.maps.event.addListener(marker1,'click',function(){
infowindow1.open(map,marker1); });
}

你可能喜欢这个

函数init（）
{
//4个图标的图标URL
瓦尔·贝尔=”http://image1.png“，cam=”http://image2.png",
黑色=”http://image3.png“，绿色=”http://image4.png";
//4个图像的图像URL
conimg1=”http://contentImage1.jpg“，conimg2=”http://contentImage2.jpg",
conimg3=”http://contentImage3.jpg“，conimg4=”http://contentImage4.jpg",
var映射，
地点=[
[42.8284616000000000000，-76.5356041999997000000，贝尔，康涅姆格1]，
[43.65162010000000，-77.735585799997000000，黑色，conimg2]，
[44.75846240000000000000，-78.222521000003000000，cam，conimg3]，
[41.71773540000000000000，-75.74897190000020000000，绿色，conimg4]
],
myOptions={
缩放：6，
中心：新的google.maps.LatLng（位置[0][0]，位置[0][1]），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv，myOptions）；
var infowindow=new google.maps.infowindow（），marker，i，markers=[]；
对于（i=0；i

看起来像是一个可能有用的示例（虽然它使用复选框而不是按钮）你好，朋友，所以我按照你说的做了，但显然在创建var映射位置[]时出错了。。对不起，我找不到错误。。这个主意太好了。。我只需要替换图像和内容，创建按钮，并将类分配给事件侦听器。。是这样吗？感谢一个正确的lotYes，请用fiddle复制工作示例中的代码，并确保

地图画布

是

地图

，因为我使用了

。谢谢。。你帮了很多忙，但无意中滥用了他们的好意和知识，我如何在marker infowindow中添加一个表来显示其他内容。。例如：表1显示信息和说明，表2显示图片。。作为一个门外汉，我很抱歉，但是你能给我发送复制和粘贴html页面dreamweaver的代码吗。。这是我最后要问的D再次感谢！！对不起，我不在这里，不管怎样，代码在这里，您可以在这里插入表格，如

var img=“”；img+=“…”

。

function init()
{
    // Icon urls for 4 icons
    var bell="http://image1.png", cam="http://image2.png",
    black="http://image3.png", green="http://image4.png";
    // Image urls for 4 images
    conimg1="http://contentImage1.jpg", conimg2="http://contentImage2.jpg",
    conimg3="http://contentImage3.jpg", conimg4="http://contentImage4.jpg",

    var map,
    locations = [
        [42.82846160000000000000, -76.53560419999997000000, bell, conimg1],
        [43.65162010000000000000, -77.73558579999997000000, black, conimg2],
        [44.75846240000000000000, -78.22252100000003000000, cam, conimg3],
        [41.71773540000000000000, -75.74897190000002000000, green, conimg4]
    ],
    myOptions = {
       zoom: 6,
       center: new google.maps.LatLng(locations[0][0], locations[0][1]),
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i, markers=[];
    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map,
            icon: locations[i][2],
            visible:true   
         });
         markers.push(marker)
         google.maps.event.addListener(marker, 'click',(function(marker, i){
             return function() {
                 var img="<img class='contentImage' src='"+locations[i][3]+"' />";
                 infowindow.setContent(img);
                 infowindow.open(map, marker);
             }
         })(marker, i));
     }

    var btn1=document.getElementById('btn1');
    google.maps.event.addDomListener(btn1, 'click', function(){
        if(markers[0].visible)
        {   
            this.innerHTML="Show Icons (1 and 2)";
            this.className="btn"; 
            markers[0].setVisible(false);
            markers[1].setVisible(false);
        }
        else
        {
            this.innerHTML="Hide Icons (1 and 2)";
            this.className="btn btn-primary";
            markers[0].setVisible(true);
            markers[1].setVisible(true);  
        }    
    });

    var btn2=document.getElementById('btn2'); 
    google.maps.event.addDomListener(btn2, 'click', function(){
        if(markers[2].visible)
        {   
            this.innerHTML="Show Icons (3 and 4)";
            this.className="btn";
            markers[2].setVisible(false);
            markers[3].setVisible(false);
        }
        else
        {
            this.innerHTML="Hide Icons (3 and 4)";
            this.className="btn btn-primary";
            markers[2].setVisible(true);
            markers[3].setVisible(true);  
        }    
    });
}