ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript API v3 を使用して、Google マップ上の情報ウィンドウで複数のマーカーを簡単にプロットするにはどうすればよいですか?
JavaScript API v3 を使用して、Google マップ上の情報ウィンドウで複数のマーカーを簡単にプロットするにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-12-23 15:48:12760ブラウズ
Google Maps JS API v3 での複数のマーカーのプロットの簡素化
Google Maps JavaScript API を使用する場合、複数のマーカーのプロットには複雑な実装が必要になる場合があります。 。この記事では、付随する情報ウィンドウとともにマーカーの配列を表示しようとする初心者向けに、簡単な解決策を提供します。
問題:
対応する名前、座標を持つ位置の配列を考えてみましょう。 、および参考値。目的は、地図上の各場所にマーカーを配置し、マーカーのクリック時に名前を含む情報ウィンドウを表示することです。
解決策:
HTML とCSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div>
JavaScript:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
説明:
- 地図とマーカーを表示する情報ウィンドウ情報。
- 場所の配列を反復処理し、各場所のマーカー オブジェクトを作成します。
- マップにマーカーを追加します。
- イベント リスナーを使用して情報ウィンドウを関連付けます各マーカーを使用して、その場所の名前を表示します。
結果:
実行すると、コードは入力配列からの場所を表す複数のマーカーを含む Google マップを生成します。任意のマーカーをクリックすると、その名前を表示する情報ウィンドウが開きます。
クロージャーの注意:
コードはクロージャーを利用して、マーカーと位置インデックスを引数としてイベント リスナーに渡します。 。クロージャに詳しくない場合は、Mozilla の開発センターがこのトピックに関する役立つガイドを提供しています。
以上がJavaScript API v3 を使用して、Google マップ上の情報ウィンドウで複数のマーカーを簡単にプロットするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript css html Array Object if for require using Event map JS this location display input windows
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。