關閉特定的信息窗口/隱藏折線Google Maps API v3
[英]close specific infoWindow / Hide Polyline Google maps api v3
問題描述
我需要能夠顯示隱藏單個折線及其關聯的infoWindow +標記。
這是我的代碼，目前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>
2 個解決方案
解決方案1
0 2011-04-01 22:22:16
看起來您只需要將路由聲明為全局變量即可。 將以下內容添加到腳本頂部
var bromley_route638, bromley_route638Run2;
解決方案2
0 2011-04-02 00:20:24
這是完整的JSFiddle演示：
這是一種實現方法，但是可以優化代碼。 首先，我添加了兩個新功能removeMarker和checkMarker。 removeMarker，從地圖以及數組中刪除一個標記，這樣您就不會在同一地點留下多個重復的標記。 checkMarker，檢查標記是否已經在地圖上和全局markersArray中。 如果返回true，否則返回false。 我們使用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
最后但並非最不重要的一點是，我通過添加標識符參數“ number”來更改您的hideRoutePath，並使用removeMarker函數隱藏/刪除關聯的路徑和標記：
function hideRoutePath(number) {
if (number == 1) {
//clearOverlays();
bromley_route638.setMap(null);
}
else if (number == 2) {
//clearOverlays();
bromley_route638Run2.setMap(null);
}
removeMarker(number);
}
Google地圖v3折線上的Infowindow無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.