2014-10-18 39 views
-1

我正在从数据库中加载标记以在下面显示的谷歌地图上显示。这是行得通的,但是,我想实现在页面上的其他位置按下特定按钮的选项,然后地图会动态更改为仅显示与点击相关的标记。通过复选框加载特定标记?

基本上,我想通过我的数据库中的“类型”列进行过滤,但仍然保留所有类型默认情况下使用。例如。页面加载,地图加载和显示所有类型,用户单击一个按钮,导致地图只显示具有类型1作为数据库中的值的标记。有点像一个复选框切换。

任何有关如何继续下去的想法,我不认为从数据库重新加载标记是最有效的方法,我可以简单地隐藏具有此属性的标记吗?

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

回答

0

你不能只是躲在根据自己的标签或键入某些特定的标记,你要隐藏/全部删除,然后再添加这些,你需要你的地图上

下面是功能您需要:

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