2014-10-18 38 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這將清除您的地圖,並重新載入特定的。