關閉特定信息窗口/隱藏多段線谷歌地圖api v3

我需要能夠顯示隱藏單獨的折線及其相關的infoWindow +標記。關閉特定信息窗口/隱藏多段線谷歌地圖api v3

這裏是我的代碼，此刻clearOverlays（）函數隱藏所有標記，我需要能夠隱藏底部鏈接中hideRoutePath（）函數的特定標記..任何幫助讚賞這是因爲我已經用完了想法..謝謝！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<title>test</title> 

<script type='text/javascript'> 

var map = null; 
var markersArray = []; 

//default load position 
function initialize() { 
    var latlng = new google.maps.LatLng(51.41859298,0.089179345); 

    var settings = { 
     zoom: 11, 
     center: latlng, 
     mapTypeControl: true, 
     scaleControl: true, 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
     navigationControl: true, 
     navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT}, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     backgroundColor: 'white' 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), settings); 

} 
// End initialize function 

function clearOverlays() { 

    if (markersArray) { 
    for (i in markersArray) { 
     markersArray[i].setMap(null); 

    } 
    } 
} 


// Mapping variables 
var global_strokeColor = "#ED00FF"; 
var global_strokeOpacity = 0.7; 
var global_strokeWeight = 6; 

//Route 1 
function showRoutePath_1() { 

    position = new google.maps.LatLng(51.41859298,0.089179345); 
    var infowindow = new google.maps.InfoWindow({content: "Beaverwood School"}); 
    var marker = new google.maps.Marker({position: position,map: map}); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 

    markersArray.push(marker); 

    //open infowWindow with marker 
    infowindow.open(map, marker); 
    //setTimeout(function() { infowindow.close(); }, 5000); 

    bromley_route638 = new google.maps.Polyline({ 
     path: [ 
     new google.maps.LatLng(51.408664,0.114405), 
     new google.maps.LatLng(51.412973,0.114973), 
     new google.maps.LatLng(51.417979,0.097195), 
     new google.maps.LatLng(51.421214,0.023720)], 
     strokeColor: global_strokeColor, 
     strokeOpacity: global_strokeOpacity, 
     strokeWeight: global_strokeWeight 
    }); 

    bromley_route638.setMap(map); 

} 
// End Route 1 

//Route 2 
function showRoutePath_2() { 

    position = new google.maps.LatLng(51.382522,0.045018); 

    var infowindow = new google.maps.InfoWindow({content: "Bishops Justus School"}); 
    var marker = new google.maps.Marker({position: position,map: map}); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 

    markersArray.push(marker); 

    //open infowWindow with marker 
    infowindow.open(map, marker); 
    //setTimeout(function() { infowindow.close(); }, 5000); 

    bromley_route638Run2 = new google.maps.Polyline({ 
     path: [ 
     new google.maps.LatLng(51.369530,0.002027), 
     new google.maps.LatLng(51.375388,0.010733), 
     new google.maps.LatLng(51.377991,0.009467), 
     new google.maps.LatLng(51.401988,0.017248)], 
     strokeColor: global_strokeColor, 
     strokeOpacity: global_strokeOpacity, 
     strokeWeight: global_strokeWeight 
    }); 

    bromley_route638Run2.setMap(map); 

} 
//End Route 2 


//Hide Routes 
function hideRoutePath(number) { 
    if(number == 1) { 
    clearOverlays(); 
    bromley_route638.setMap(null); 
    } 
    else if(number == 2) { 
    clearOverlays(); 
    bromley_route638Run2.setMap(null);} 
} 

</script> 

</head> 

<body onload='initialize()'> 

    <div id="map_canvas"></div> 

    <a class="exp" id="myMenu1">View schools in Hackney</a> 

    <div class="expandable_box" id="myDiv1"> 
     <p>Select a school to view its bus route and location.</p> 
     <a href="#" onClick="showRoutePath_1();"> Beaverwood School +</a>/<a href="#" onClick="hideRoutePath(1);">-</a><br/> 
     <a href="#" onClick="showRoutePath_2();"> Bishop Justus School +</a>/<a href="#" onClick="hideRoutePath(2);">-</a> 
    </div> 

</body> 
</html>

來源

2011-03-31 Mark

它看起來像你只需要聲明你的路線爲全局變量。以下內容添加到您的腳本

var bromley_route638, bromley_route638Run2;

來源

2011-04-01 22:22:16 herostwist

這裏的頂部是全JSFiddle Demo:

下面是做到這一點的一種方式，但代碼可以被優化。首先我添加了兩個新功能removeMarker和checkMarker。 removeMarker，從地圖和陣列中移除一個標記，這樣你就不會在同一地點多次存在延時標記。 checkMarker，檢查標記是否已經在地圖上和全局標記陣列中。如果返回false，則返回true。我們使用checkMarker來確保我們不會在同一個latlng創建多個標記實例。在你的情況下，它的標記路線1和標記路線2

//remove specific marker from map 
function removeMarker(myMark) { 
    if (markersArray) { 
     for (var i in markersArray) { 
      if (myMark == markersArray[i]['number']) { 
       console.log(markersArray[i]['number']); 
       markersArray[i].setMap(null); 
       markersArray.splice(i,1); //removes marker from array 
       break; 
      } 
     } 
    } 
} 

//check if marker already exist on map 
function checkMarker(number){ 
    if(markersArray){ 
     for(var i in markersArray){ 
      if(markersArray[i]['number'] == number) 
       return true; 
     } 
    } else 
     return false; 
}

我然後使用checkMarker，以確保我們不會創造雙重標記與它的關聯路徑添加標記檢查的，也是我給你製造商的唯一「號碼」標識符。 1代表marker1，2代表marker2。這兩個MOD應該在功能showRoutePath_1和showRoutePath_2：

//check if marker1 already on map if true do nothing 
if(checkMarker(1)) //check if marker already in global marker array/map if marker 2 replace 1 with 2 
    return; 
position = new google.maps.LatLng(51.41859298, 0.089179345); 
var infowindow = new google.maps.InfoWindow({ 
    content: "Beaverwood School" 
}); 
var marker = new google.maps.Marker({ 
    position: position, 
    map: map 
}); 
marker['number'] = 1; //Here is the unique identifier we assign. if marker 2 replace 1 with 2

最後但並非最不重要的，我通過添加標識參數「數字」改變你的hideRoutePath，並使用removeMarker功能隱藏/刪除副路徑和標記：

function hideRoutePath(number) { 
    if (number == 1) { 
     //clearOverlays(); 
     bromley_route638.setMap(null); 
    } 
    else if (number == 2) { 
     //clearOverlays(); 
     bromley_route638Run2.setMap(null); 
    } 
    removeMarker(number); 
}

來源

2011-04-02 00:20:24 kjy112

關閉特定信息窗口/隱藏多段線谷歌地圖api v3

回答

相關問題