Fatal编程技术网
  • javascript/
  • Javascript （un）选中按钮并显示/隐藏标记谷歌地图

Javascript （un）选中按钮并显示/隐藏标记谷歌地图

javascript jquery json api google-maps

Javascript （un）选中按钮并显示/隐藏标记谷歌地图,javascript,jquery,json,api,google-maps,Javascript,Jquery,Json,Api,Google Maps,我试了和这个问题差不多的方法 但我不能让它工作。。。我使用了相同的选中/取消选中按钮，但单击这些按钮不会更改我的标记。一次仅选中/取消选中复选框 我还尝试了“最初隐藏”部分，但所有标记仍然可见 你能帮我吗？我会很感激的 这是我的密码： <script type="text/javascript"> var gmarkers = []; var map = null; var ib = new InfoBox(); // Function to check/uncheck and s

我试了和这个问题差不多的方法

但我不能让它工作。。。我使用了相同的选中/取消选中按钮，但单击这些按钮不会更改我的标记。一次仅选中/取消选中复选框

我还尝试了“最初隐藏”部分，但所有标记仍然可见

你能帮我吗？我会很感激的

这是我的密码：

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


var gmarkers=[]；
var-map=null；
var ib=new InfoBox（）；
//用于选中/取消选中以及显示/隐藏所有复选框和相应的所有标记的函数
函数检查（）{
$（'input[type=“checkbox”]”）。prop（“checked”，true）。change（）；
}
函数取消选中（）{
$（'input[type=“checkbox”]”）。prop（“checked”，false）。change（）；
}
//创建标记和设置事件窗口的函数
函数createMarker（latlng、名称、html、类别）{
var-boxText=document.createElement（“div”）；
boxText.style.cssText=“页边空白顶部：10px；背景：rgba（255255255,0.7）；填充：10px；边框半径：10px；颜色：#000”；
boxText.innerHTML=html；
变量myOptions={
内容：boxText，
disableAutoPan:错，
最大宽度：0，
pixelOffset:new google.maps.Size（-100,0），
zIndex:null，
boxStyle:{
背景：“url（'tip.png'）不重复”，
宽度：“250px”，
},
closeBoxURL:“”，
infoBoxClearance:new google.maps.Size（1,1），
伊希登：错，
窗格：“浮动窗格”，
enableEventPropagation:false
};
var marker=new google.maps.marker({
位置：latlng，
图标：类别+“.png”，
地图：地图，
标题：姓名，
zIndex:Math.round（latlng.lat（）*-100000）marker.setVisible（false））
})；//结束JSON
}); //结束jQuery
}//结束初始化
吃的地方
住宿地点
您的问题是没有调用应触发显示/隐藏函数的
更改
回调。我在checkbox类型的所有输入中添加了一个类
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>
检查

中的结果，尝试发布一个jsfiddle，这将更容易帮助您我已经尝试过了，但是我无法让data.json正常工作。暂时fiddle是JSFIDLE对我不起作用，所以我在codepen上创建了一个示例并获得了数据。json工作：Justed用解决方案更新了我的anwser是的！这是正常工作：（联合国）检查类别工程，（联合国）检查所有工程。我还解决了“最初隐藏”的问题：“gmarkers.forEach”而不是“markers.forEach”…（缺少“g”），但现在的问题是：当第一次打开页面时，所有标记都被隐藏（它们应该隐藏），但所有复选框都被选中。更新的笔：可能是因为输入中的“已检查”吗？已测试：将输入“已检查”更改为“未检查”。现在一切正常：TNX@克劳迪奥：太好了！您应该删除未选中的
，因为这不是有效的html。如果工作正常，请将答案标记为已移除这些零件，仍正常工作。Tnx再次标记了您的答案，但可能不会显示，因为我是新手。。 
$(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);
      }
    });
});