2012-10-18 97 views
0

我將有幾個標記(現在我只是做兩個,直到我得到的結構去),我想能夠點擊外部鏈接打開標記的信息框,但是當一個標記的信息框打開時,另一個被關閉。我也希望能夠隱藏和顯示標記。所以當按下一個按鈕時,它隱藏了第一個標記,而當另一個按鈕被按下時,它顯示第一個標記並隱藏第二個標記。onclick隱藏/顯示谷歌地圖標記

現在我有我的地圖這樣設置,我不確定從這裏開始如何切換可見性設置和信息氣泡。

var LOC_850 = new google.maps.LatLng(42.326435,-71.149499); 


var mapOptions = { 
    zoom: 16, 
    center: LOC_850, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 


var CONTENT_850 = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
    'sandstone rock formation in the southern part of the '+ 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
    'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
    'Heritage Site.</p>'+ 
    '</div>'; 

var INFO_850 = new google.maps.InfoWindow({ 
    content: CONTENT_850 
}); 
var BTN_850 = 'CONTAINER_850'; 
var MARKER_850 = new google.maps.Marker({ 
    position: LOC_850, 
    map: map, 
    title: 'Hello World!' 
}); 
google.maps.event.addListener(MARKER_850, 'click', function() { 
    INFO_850.open(map,MARKER_850); 
}); 
google.maps.event.addDomListener(document.getElementById(BTN_850), 'click', function() { 
    INFO_850.open(map,MARKER_850); 
}); 





var LOC_850_60bus_out = new google.maps.LatLng(42.326822,-71.150157); 
var CONTENT_850_60bus_out = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">DIFFERENT</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
    'sandstone rock formation in the southern part of the '+ 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
    'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
    'Heritage Site.</p>'+ 
    '</div>'; 

var INFO_850_60bus_out = new google.maps.InfoWindow({ 
    content: CONTENT_850_60bus_out 
}); 
var BTN_850_60bus_out = 'CONTAINER_850_60bus_out'; 
var MARKER_850_60bus_out = new google.maps.Marker({ 
    position: LOC_850_60bus_out, 
    map: map, 
    title: 'Hello World!' 
}); 
google.maps.event.addListener(MARKER_850_60bus_out, 'click', function() { 
    INFO_850_60bus_out.open(map,MARKER_850_60bus_out); 
}); 
google.maps.event.addDomListener(document.getElementById(BTN_850_60bus_out), 'click', 
function() { 
    INFO_850_60bus_out.open(map,MARKER_850_60bus_out); 
}); 

} 


function loadScript() { 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' + 
    'callback=initialize'; 
document.body.appendChild(script); 
} 

window.onload = loadScript; 
</script> 

回答

0

參見[這個例子中 「類別」 地圖(http://www.geocodezip.com/v3_MW_example_categories.html)(從Mike Williams' v2 tutorial example

翻譯我有

  • (我稱之爲)v2 infowindow功能(單個infowindow)
  • 隱藏/顯示標記類別的複選框