JavaScript を使用して Google マップ上の InfoWindows で複数のマーカーを簡単に実装する方法-jsチュートリアル-php.cn

JavaScript を使用して Google マップ上の InfoWindows で複数のマーカーを簡単に実装する方法

DDD

リリース： 2024-12-31 04:22:09

オリジナル

901 人が閲覧しました

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

JavaScript での簡単な Google マップの複数のマーカーの実装

このチュートリアルでは、Google マップで複数のマーカーを作成するための簡素化されたアプローチを検討します。地図。

概要

Google Maps API を探索する初心者にとって、地図上に複数のマーカーをプロットするのは複雑に思えるかもしれません。このチュートリアルでは、シンプルでわかりやすい解決策を提供します。

サンプルデータ

Google のサンプルデータ配列を使用してみましょう:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

ログイン後にコピー

Map

まず、Google を初期化します。地図:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: { lat: -33.92, lng: 151.25 },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

ログイン後にコピー

マーカーの作成

複数のマーカーを作成するには、location 配列を反復処理します。

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

ログイン後にコピー

追加ポップアップ InfoWindows

各マーカーをクリックするとビーチ名が表示される情報ウィンドウ:

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

ログイン後にコピー

完全な結果

以下の完全なコードスニペットには、複数のマーカー機能に必要なすべての要素が含まれています:

// HTML with map container
<!DOCTYPE html>
<html> 
<head> 
  <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>

ログイン後にコピー

これらの手順に従うことで、ポップアップ InfoWindows を使用して複数のマーカーを簡単にプロットできます。 Google マップ。

以上がJavaScript を使用して Google マップ上の InfoWindows で複数のマーカーを簡単に実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。