google-maps - グループごとにGoogleマップマーカーを表示/非表示にし、HTMLチェックボックスからイベントをトリガーする方法は?

Question

HTML 要素 (この場合はチェックボックス) をクリックして、さまざまなグループ (バー/シネマ/駐車場など) のマーカーを表示または非表示にするにはどうすればよいですか?

私のマーカーは、次のようにループから配列に生成されます。

markers[i] = new google.maps.Marker({
numero : i, 
position: latLng,
map: map,
    info: data.Description,
group: data.category,
});

私は使用する必要があると思います：

Js関数を使用したHTML要素のオンクリック。
この Js 関数には、この Gmaps メソッドが含まれている必要があります

setVisible

このような：

    google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
    });

およびイベントトリガー:

 google.maps.event.trigger(markers[i], 'click');

しかし、どうすればこれらのものを一緒に混ぜることができますか?

score 2 · Accepted Answer

選ぶ。markers特定のグループ内のすべてのマーカーの配列を保持していると仮定するとonchange、そのようにグループ内のすべてのマーカーを非表示にするチェックボックスのハンドラーを作成できます。HTMLの場合：

<input id="myCheckbox" type="checkbox" checked="checked" />

そしてしばらくして、スクリプトで、

// handler
function onClickHandler (e) {
    var i = 0, marker;
    var visible = e.target.checked; // show if checked, otherwise hide

    while (marker = markers[i++]) {
        marker.setVisible(visible); // maps API hide call
    }
}

// bind handler to checkbox. 
document.getElementById('myCheckbox').onchange = onClickHandler;

参考までに、このフィドルをチェックしてください。

score 0 · Accepted Answer

コンセプトは至ってシンプル。マーカーのグローバル配列を定義するだけです。すべてのマーカーをプッシュし、onchange イベントでマーカーを表示/非表示にします。以下のコードをチェックアウトしてください S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
     <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

<script type="text/javascript">


function initialize() 
{

  //SANI: Show hide ker marker



  //SANI: Add ker Map
  var myLatlng   = new google.maps.LatLng(31.553710, 74.358446);  //SANI: Lahore di  location
  var mapOptions = {
                        zoom: 12,
                        center: myLatlng,
                        mapTypeControl: true,
                        mapTypeControlOptions: {  //SANI: Map da style ki hovy
                                                    //style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                                                    //mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                                                    mapTypeIds: google.maps.MapTypeId.ROADMAP
                                                },
                        navigationControl: true,
                   }
  var currentmap = new google.maps.Map(document.getElementById('mapbySani'), mapOptions);
  /****************************************************************************************/
  var arrMarkers = [];
  var markers = [
                    [31.552174,74.360012,"Info for first marker"],
                    [31.550547,74.371599,"Info for second marker"],
                    [31.549943,74.380289,"Info for last marker"]
                ];

    for(var i=0; i < markers.length; i++)
    {

        var latLng          = new google.maps.LatLng(markers[i][0], markers[i][1]);  //SANI: sari location lai loop ich
        var contentString   =  markers[i][2];  //SANI: info text vi lya        
        var infowindow      = new google.maps.InfoWindow({content: contentString});   //SANI: info winsow bani 
       var marker           = new google.maps.Marker({
                                                        position: latLng,
                                                        map: currentmap
                                                    }); //SANI: marker lay sary
         google.maps.event.addListener(marker, 'click', function()
        {
            infowindow.open(currentmap,marker);
        });
        //SANI: marker dy click ty info window show krai
        //console.log(marker); 
        arrMarkers.push(marker);
    }

      //SANI: show hide ker on click listener ty
      $("#allmarkers").change(function()
      {
          if(this.checked) 
          {
            //marker.setVisible(true);
              if (arrMarkers) 
              {
                for( var i = 0, n = arrMarkers.length; i < n; ++i ) 
                {
                  arrMarkers[i].setVisible(true);
                }
              }
          }else{
                     if (arrMarkers) 
                      {
                        for( var i = 0, n = arrMarkers.length; i < n; ++i ) 
                        {
                          arrMarkers[i].setVisible(false);
                        }
                      }
               }
      });













  /******************************************************************************************/
  //SANI: add ker marker
  //addMarker(myLatlng, currentmap);
  /******************************************************************************************/
  //SANI: add ker polygon
  /* var zone1;
  var triangleCoords = [
                            new google.maps.LatLng(25.05730, 55.27144),
                            new google.maps.LatLng(25.05854, 55.28526),
                            new google.maps.LatLng(25.05676, 55.28741),
                            new google.maps.LatLng(25.05357, 55.28741),
                            new google.maps.LatLng(25.04486, 55.27213),
                            new google.maps.LatLng(25.04455, 55.25642),
                            new google.maps.LatLng(25.04284, 55.25342),
                            new google.maps.LatLng(25.05147, 55.24947),
                            new google.maps.LatLng(25.05528, 55.25419),
                            new google.maps.LatLng(25.05738, 55.27153)
                      ];

  addPolygon(zone1, triangleCoords, currentmap);*/




}

google.maps.event.addDomListener(window, 'load', initialize); //SANI: Window dy load ty map show ker dy


/* //SANI: S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  //SANI: Skeleton  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */
function addMarker(keriJagaTy, KeryMapTy)
{
   var marker = new google.maps.Marker({
      position: keriJagaTy,
      map: KeryMapTy,
      title: 'Marker added by Sani',
      //SANI: jay apni merzi da icon show kerna wa ty
      icon:'images/client.png'
  });
}


function addPolygon(keraZone, KerijagaTy, KeryMapTy)
{
     keraZone = new google.maps.Polygon({
                                    paths: KerijagaTy,
                                    strokeColor: "#3299CC",
                                    strokeOpacity: 0.8,
                                    strokeWeight: 2,
                                    fillColor: "#3299CC",
                                    fillOpacity: 0.05
                                  });

  keraZone.setMap(KeryMapTy);
}
/* //SANI: S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  //SANI: END Skeleton  @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */



</script>
<div>
    <table>
        <tr>
            <td><input type="checkbox" value="marker" id="allmarkers" /><label>Marker</label></td>
        </tr>
    </table>
</div>
<div id="mapbySani" style="width: 100%; height: 600px;"></div>
</body>
</html>

S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI

ありがとう

google-maps - グループごとにGoogleマップマーカーを表示/非表示にし、HTMLチェックボックスからイベントをトリガーする方法は?

2 に答える 2

Related

Reference