Question

我尝试了与此问题Check/uncheck all button to show/hide all markers Google maps api

几乎相同的事情

但是我没有让它工作......我使用了相同的检查/取消选中按钮，但点击这些按钮，并没有改变我的标记。只会立即选中/取消选中复选框。

我也尝试过＆＃34;最初隐藏＆＃34;部分，但仍然可以看到所有标记..

你可以帮帮我吗？我很感激！

这是我的代码：

<script type="text/javascript">
var gmarkers = [];
var map = null;
var ib = new InfoBox();

// Function to check/uncheck and show/hide all checkboxes and accordingly all markers
function check() {
  $('input[type="checkbox"]').prop("checked", true).change();
}

function uncheck() {
  $('input[type="checkbox"]').prop("checked", false).change();
}


// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "margin-top: 10px; background: rgba(255,255,255,0.7); padding: 10px; border-radius: 10px; color: #000";
  boxText.innerHTML = html;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-100, 0),
    zIndex: null,
    boxStyle: { 
      background: "url('tip.png') no-repeat",
      width: "250px",
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var marker = new google.maps.Marker({
    position: latlng,
    icon: category + ".png",
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });

  // === Store the category and name info as a marker properties ===
  marker.mycategory = category;                                 
  marker.myname = name;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    ib.setOptions(myOptions)
    ib.open(map, this);
  });
} // end createMarker

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(true);
    }
  }
  // == check the checkbox ==
  document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(false);
    }
  }
  // == clear the checkbox ==
  document.getElementById(category+"box").checked = false;
  // == close the info window, in case its open on a marker that we just hid
  ib.close();
}

// == a checkbox has been clicked ==
 $(".checkbox").change(function() {
    var category = $(this).attr("value");
    // If checked
    if ($(this).is(":checked")) {
      show(category);
    } else {
      hide(category);
    }
  })



function myclick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
}

function initialize() {
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.65623,-79.38518),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);

  google.maps.event.addListener(map, 'click', function() {
    ib.close();
  });

  $(document).ready(function(){
    $.getJSON('data.json', function(data) {
      for (var i = 0; i < data.length; i++) {
        // obtain the attribues of each marker
        var item = data[i];
        var point = new google.maps.LatLng(item.ltt, item.lgt);
        var name = item.name;
        var html = "<b>"+item.name+"<\/b><br \/>"+item.place+"<br \/><a href='"+ item.url +"' title='"+ item.name +"'>View details<\/a>";
        var category = item.cat;
        // create the marker
        var marker = createMarker(point,name,html,category);
      }



// == show or hide the categories initially ==
markers.forEach((marker) => marker.setVisible(false))

    }); //end JSON
  }); //end jQuery

} //end initialize

</script>
</head>
<body onload="initialize()"> 

<div class="checkbuttons">
        <input type="button" value="Check All" class="button" onclick="check();">
        <input type="button" value="Uncheck All" class="button" onclick="uncheck();"></div>
     <form action="#">
  <div class="map-check"><img src="eat.png" title="Eat" /><div><input type="checkbox" id="eatbox" value="eat" onclick="boxclick(this,'eat')" /> Places to Eat</div></div>
  <div class="map-check"><img src="stay.png" title="Stay" /><div><input type="checkbox" value="stay" id="staybox" onclick="boxclick(this,'stay')" /> Places to Stay</div></div>

    </div>
  </div> 
</div>

<div id="map" style="width: 750px; height: 600px"></div>
</body>

</html>

Answer 1

code的问题在于，未调用应触发显示/隐藏功能的change回调。我在类型复选框

的所有输入中添加了一个类markerTypeSwitch

<div class="checkbuttons">
  <input type="button" value="Check All" class="button" onclick="check();">
  <input type="button" value="Uncheck All" class="button" onclick="uncheck();"></div>
  <form action="#">
    <div class="map-check"><img src="eat.png" title="Eat" /><div><input class="markerTypeSwitch" type="checkbox" id="eatbox" value="eat" onclick="" checked/> Places to Eat</div></div>
    <div class="map-check"><img src="stay.png" title="Stay" /><div><input class="markerTypeSwitch" type="checkbox" id="staybox" value="stay" onclick="" checked/> Places to Stay</div></div>
    <div class="map-check"><img src="shop.png" title="Shop" /><div><input class="markerTypeSwitch" type="checkbox" id="shopbox" onclick="" value="shop" checked/>Places to Shop</div></div>
    <div class="map-check"><img src="play.png" title="Play" /><div><input class="markerTypeSwitch" type="checkbox" id="playbox" value="play" onclick="" checked/>Places to Play</div></div>
    <div class="map-check"><img src="community.png" title="Community" /><div><input  class="markerTypeSwitch" type="checkbox" value="community" id="communitybox" onclick="" checked/>Community Resources</div></div>
  </div>
</div>

并将change事件附件更改为$(document).ready(function() {})：

$(document).ready(function() {
    // == a checkbox has been changed ==
   $(".markerTypeSwitch").change(function() {
      var cat = $(this).attr("value");
      // If checked
      if ($(this).is(":checked")) {
        show(cat);
      } else {
        hide(cat);
      }
    });
});

检查codepen

中的结果

（联合国）选中按钮并显示/隐藏标记谷歌地图

1 个答案: