0

いくつかのマーカーを用意する予定です (現在、構造が整うまでは 2 つだけです)。マーカーの情報ボックスを開く外部リンクをクリックできるようにしたいのですが、1 つのマーカーの情報ボックスがもう一方は閉じます。また、マーカーを非表示および表示できるようにしたいと思います。したがって、1 つのボタンを押すと最初のマーカーが非表示になり、もう 1 つのボタンを押すと最初のマーカーが表示され、2 番目のマーカーが非表示になります。

現在、私は自分のマップをこのように設定していますが、可視性の設定と情報バブルを切り替える方法について、ここからどこへ行くべきかわかりません.

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>
4

1 に答える 1

0

[この例の「カテゴリ」マップ(http://www.geocodezip.com/v3_MW_example_categories.html) を参照してください ( Mike Williams の v2 チュートリアルの例から翻訳)

私が持って

  • (私が呼ぶもの) v2 情報ウィンドウ機能 (単一の情報ウィンドウ)
  • マーカーのカテゴリを非表示/表示するチェックボックス。
于 2012-10-18T14:25:35.900 に答える