Question

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

基本上，我想按＆＃39;类型＆＃39;进行过滤。我的数据库中的列，但默认情况下仍保持所有类型的loaing。例如。页面加载，映射加载并显示所有类型，用户单击按钮会导致地图仅显示将type1作为db中的值的标记。有点像带有复选框的切换。

关于如何继续这样做的任何想法，我都不认为从数据库重新加载标记是最有效的方法，我可以简单地隐藏具有此属性的标记吗？

    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");
        });
    });

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

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

1 个答案: