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

Question

在Google地图中，我希望有一些按钮可以隐藏和显示地图标记，但是我需要有多个按钮，每个按钮都有自己的一组标记。 例如，按钮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); });
}

Answer 1

你可能会喜欢这样

这里的一个工作示例 。

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