按复选框加载特定标记

Loading specific markers by checkbox?

本文关键字：复选框 加载      更新时间：2023-09-26

我正在从数据库加载标记，通过下面的方式显示在谷歌地图上。这很好，但是，我想实现在页面上其他地方按下特定按钮的选项，然后地图将动态更改为只显示与所单击内容相关的标记。

基本上，我想按数据库中的"type"列进行筛选，但默认情况下仍然保持所有类型的浮动。例如，页面加载，地图加载并显示所有类型，用户点击一个按钮，导致地图只显示数据库中以type1为值的标记。有点像一个带复选框的开关。

关于如何进行这项工作，我不认为从数据库重新加载标记是最有效的方法，我可以简单地隐藏具有此属性的标记吗？

    map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);         
    //Load Markers from the XML File, Check (map_process.php)
    $.get("map_process.php", function (data) {
        $(data).find("marker").each(function () {
              var name      = $(this).attr('name');
              var address   = '<p>'+ $(this).attr('address') +'</p>';
              var type      = $(this).attr('type');
              var description ='<p>'+ $(this).attr('description') +'</p>';
              var point     = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
              var icon1 = customIcons[type] || {};
              create_marker(point, name, address, false, false, false, icon1.icon);//"http://sanwebe.com/assets/google-map-save-markers-db/icons/pin_blue.png");
        });
    });

你不能只根据标记或类型隐藏一些特定的标记，你必须先隐藏/删除它们，然后在地图上添加你需要的标记

以下是您需要的功能：

var all_markers = [];
var show_markers = [];
function setMarkers(map) {
  for (var i = 0; i < show_markers.length; i++) {
    show_markers[i].setMap(map);
  }
}
function showMarkers(type) {
  setMarkers(null);
  show_markers = []
  for (var i = 0; i < all_markers.length; i++) {
    if (all_markers[i].type == type){
        show_markers.push(all_markers[i])
    }
  }
  setMarkers(map);
}

这里的想法是：将所有标记加载到all_markers中，在第一次加载标记时，show_markers必须等于all_markers。点击显示特定标记的按钮必须触发功能showMarkers，该功能将清除地图并仅重新加载特定标记。

相关文章：