0

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

1 に答える 1

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);  
        }    
    });
}
于 2012-10-16T21:37:53.367 に答える