在Google地图上显示和隐藏标记

Question

I am trying to develop map with show/hide marker feature for my project. 我正在尝试为我的项目开发具有显示/隐藏标记功能的地图。 But I don't have proper knowledge of javascript. 但是我对javascript没有足够的了解。 So I am looking on google for a while now. 所以我现在在谷歌上找了一段时间。 And saw many posts related this.Now I am using code from that post shows here 看到了很多与此相关的帖子。现在，我在这里使用该帖子中的代码

In that post map is fine BUT there are some lack in this post. 在那个帖子地图上很好，但是这个帖子有些不足。

It only shows marker but doesn't hide on clicking on checkbox again. 它仅显示标记，但在再次单击复选框时不会隐藏。
It shows only one category at a time 一次只显示一个类别

CODE: 码：

<!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.

here you need to just add jquery version file . 在这里，您只需要添加jquery版本文件。 and simply check whether the checkbox click at that time you need to setvisible true other wise it becomes false check my code Try this, 并简单地检查一下当时是否需要单击复选框，否则需要将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