在Google地圖上顯示和隱藏標記

Question

我正在嘗試為我的項目開發具有顯示/隱藏標記功能的地圖。 但是我對javascript沒有足夠的了解。 所以我現在在谷歌上找了一段時間。 看到了很多與此相關的帖子。現在，我在這里使用該帖子中的代碼

在那個帖子地圖上很好，但是這個帖子有些不足。

它僅顯示標記，但在再次單擊復選框時不會隱藏。
一次只顯示一個類別

碼：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
<script type="text/javascript" 
       src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
 <div id="map" style="width: 400px; height: 300px;"></div> 

 <input type="checkbox" value="Show Group 1" onclick="displayMarkers(1);">
 <input type="checkbox" value="Show Group 2" onclick="displayMarkers(2);">

 <script type="text/javascript"> 

 var beaches = [
   ['Bondi Beach', -33.890542, 151.274856, 1,],
   ['Coogee Beach', -33.923036, 151.259052, 1],
   ['Cronulla Beach', -34.028249, 151.157507, 2],
   ['Manly Beach', -33.800101, 151.287478, 2],
   ['Maroubra Beach', -33.950198, 151.259302, 2]
 ];

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.88, 151.28),
    mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var markers = [];

 var i, newMarker;

 for (i = 0; i < beaches.length; i++) {
   newMarker = new google.maps.Marker({
   position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
   map: map,
   title: beaches[i][0]
 });

 newMarker.category = beaches[i][3];
 newMarker.setVisible(false);

 markers.push(newMarker);
 }

  function displayMarkers(category) {
  var i;

 for (i = 0; i < markers.length; i++) {
   if (markers[i].category === category) {
     markers[i].setVisible(true);
   }
   else {
     markers[i].setVisible(false);
   }
 }
 }    

</script> 
</body> 
</html>

Answer 1

Please check this code it should be working for you.

在這里，您只需要添加jquery版本文件。 並簡單地檢查一下當時是否需要單擊復選框，否則需要將visible設置為true，否則它將變為false。請檢查我的代碼，

           <!DOCTYPE html>
       <html> 
       <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
           <script type="text/javascript" 
                   src="http://maps.google.com/maps/api/js?sensor=false"></script>
           <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
       </head> 
       <body> 
        <div id="map" style="width: 400px; height: 300px;"></div> 

        <input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
        <input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">

        <script type="text/javascript"> 

        var beaches = [
          ['Bondi Beach', -33.890542, 151.274856, 1,],
          ['Coogee Beach', -33.923036, 151.259052, 1],
          ['Cronulla Beach', -34.028249, 151.157507, 2],
          ['Manly Beach', -33.800101, 151.287478, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 2]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 10,
           center: new google.maps.LatLng(-33.88, 151.28),
           mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];

        var i, newMarker;

        for (i = 0; i < beaches.length; i++) {
          newMarker = new google.maps.Marker({
          position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
          map: map,
          title: beaches[i][0]
        });

        newMarker.category = beaches[i][3];
        newMarker.setVisible(false);

        markers.push(newMarker);
        }

         function displayMarkers(obj,category) {
             var i;

             for (i = 0; i < markers.length; i++)
             {   
                     if (markers[i].category === category) {
                         if ($(obj).is(":checked")) {

                             markers[i].setVisible(true);
                         } else {
                             markers[i].setVisible(false);    
                         }
                     } 
                     else 
                     {
                         markers[i].setVisible(false);
                     }
                 }


         }    

       </script> 
       </body> 
       </html>

在Google地圖上顯示和隱藏標記

問題描述

1 個解決方案

解決方案1
2 已采納 2016-02-06 06:45:24

在Google地圖上顯示和隱藏標記

問題描述

1 個解決方案

解決方案1 2 已采納 2016-02-06 06:45:24

解決方案1
2 已采納 2016-02-06 06:45:24