通过复选框加载特定标记？答案

【问题标题】：Loading specific markers by checkbox?通过复选框加载特定标记？
【发布时间】：2014-10-18 03:53:43
【问题描述】：

我正在从数据库中加载标记以显示在谷歌地图上，如下所示。这工作正常但是，我想实现在页面上的其他位置按下特定按钮的选项，然后地图将动态更改以仅显示与单击的内容有关的标记。

基本上，我想按数据库中的“类型”列进行过滤，但默认情况下仍保留所有类型。例如。页面加载，地图加载并显示所有类型，用户单击一个按钮，该按钮导致地图仅显示具有 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");
        });
    });

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

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

以下是您需要的功能：

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，这将清除您的地图并仅重新加载特定的地图。

【讨论】：