您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

形狀

您可以新增各種形狀到您的地圖。形狀是地圖上的物件,連結到緯度/經度座標。下列為可用的形狀:直線多邊形圓形矩形。您也能設定形狀讓使用者可以編輯或拖曳它們

折線

如果要在地圖上繪製線條,請使用折線。 Polyline 類別可定義地圖上連接線段的線型疊加層。Polyline 物件包含一個 LatLng 位置陣列,且會依排序連接那些位置建立一連串線段。

新增折線

Polyline 建構函式使用一組指定線條 LatLng 座標的 PolylineOptions,以及一組調整折線視覺行為的樣式。

Polyline 物件在地圖上會繪製成一連串直的線段。建構線條時,您可以在 PolylineOptions 內針對線條筆觸指定自訂色彩、粗細和不透明度,或者您可以在建構之後變更這些屬性。折線支援下列筆觸樣式:

  • strokeColor 指定十六進位 HTML 色彩 "#FFFFFF" 格式。Polyline 類別不支援具名色彩。
  • strokeOpacity 指定介於 0.01.0 之間的數值來決定線條色彩的不透明度。預設值為 1.0
  • strokeWeight 指定線條的寬度(以像素為單位)。

折線的 editable 屬性可指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯的形狀。同樣地,您可以設定 draggable 屬性,允許使用者拖曳線條

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

檢視範例 (polyline-simple.html)

移除折線

如果要從地圖移除折線,請呼叫 setMap() 方法並傳遞 null 做為引數。在下列範例中,flightPath 是折線物件:

flightPath.setMap(null);

請注意,上面的方法不會刪除折線。它只會從地圖移除折線。如果您想要刪除折線,應該先從地圖移除它,然後將折線自身設成 null

檢視範例 (polyline-remove.html)

檢查折線

折線可指定一連串座標成為一個 LatLng 物件陣列。這些座標決定了線條的路徑。如果要擷取座標,請呼叫 getPath(),它會傳回一個 MVCArray 類型陣列。您可以使用下列操作來操縱和檢查陣列:

  • getAt() 會傳回具有指定從零開始索引值的 LatLng
  • insertAt() 會插入具有指定從零開始索引值的已傳遞 LatLng。請注意,該索引值的任何現有座標都會被往前移。
  • removeAt() 會移除具有指定從零開始索引值的 LatLng
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

檢視範例 (polyline-complex.html)

自訂折線

您可以將向量型影像以符號的形式新增到折線。搭配使用符號與 PolylineOptions 類別,就能更好地控制地圖上折線的外觀和風格。請參閱符號,以瞭解有關箭頭虛線自訂符號動畫符號的資訊。

多邊形

多邊形表示由閉合路徑(迴圈)包圍的一個區域,由一連串座標定義。Polygon 物件類似於 Polyline 物件,它們都包含一連串排序的座標。多邊形的繪製包含筆觸和填滿。您可以定義多邊形邊緣(筆觸)的自訂色彩、粗細和不透明度,為包圍區域(填滿)自訂色彩和不透明度。色彩應該使用十六進位 HTML 格式表示。不支援色彩名稱。

Polygon 物件可以描述複雜的形狀,包括:

  • 由單一多邊形定義的多個非連續區域。
  • 內部包含孔洞的區域。
  • 一或多個區域的交集。

如果要定義複雜形狀,您必須使用具有多個路徑的多邊形。

注意:資料圖層提供繪製多邊形的簡單方式。它為您處理多邊形捲繞,讓您更輕鬆地繪製具有孔洞的多邊形。請參閱資料圖層的文件

新增多邊形

因為多邊形區域會包含數個個別的路徑,所以 Polygon 物件的 paths 屬性可指定一組每個都是 MVCArray 類型的陣列。每個陣列可定義個別一連串排序的 LatLng 座標。

對於只包含一個路徑的簡單多邊形,您可以使用單個 LatLng 座標陣列來建構一個 Polygon。Google Maps JavaScript API 會在將簡單陣列儲存到 paths 屬性內時,於建構時將它轉換為一整組陣列的陣列。API 為包含單一路徑的多邊形,提供一個簡單的 getPath() 方法。

多邊形的 editable 屬性可指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯的形狀。同樣地,您可以設定 draggable 屬性,允許使用者拖曳形狀

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

檢視範例 (polygon-simple.html)

多邊形自動完成

上述範例中的 Polygon 包含四組 LatLng 座標,但請注意第一組座標與最後一組座標定義了相同的位置,而完成了一個迴圈。然而實際操作時,由於多邊形的定義就是閉合區域,因此您不需要指定最後一組座標。Google Maps JavaScript API 會劃線將任何指定路徑的最後一個位置與第一個位置相連,而自動完成一個多邊形。

下列範例與前一個範例完全一樣,但是省略了最後一個 LatLng檢視範例 (polygon-autoclose.html)

移除多邊形

如果要從地圖移除多邊形,請呼叫 setMap() 方法並傳遞 null 做為引數。在下列範例中,bermudaTriangle 是多邊形物件:

bermudaTriangle.setMap(null);

請注意,上面的方法不會刪除多邊形。它只會從地圖移除多邊形。如果您想要刪除多邊形,應該先從地圖移除它,然後將多邊形自身設成 null

檢查多邊形

多邊形會將它連串的座標指定為一組陣列,每個陣列都是 MVCArray 類型。每個「分支」陣列皆為指定單一路徑的 LatLng 座標陣列。如果要擷取這些座標,請呼叫 Polygon 物件的 getPaths() 方法。因為陣列是 MVCArray,所以您需要使用下列操作來操縱和檢查它:

  • getAt() 會傳回具有指定從零開始索引值的 LatLng
  • insertAt() 會插入具有指定從零開始索引值的已傳遞 LatLng。請注意,該索引值的任何現有座標都會被往前移。
  • removeAt() 會移除具有指定從零開始索引值的 LatLng
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

檢視範例 (polygon-arrays.html)

在多邊形上放置孔洞

如果要在多邊形內建立一個空的區域,您需要建立兩個路徑,一個路徑在另一個路徑內。如果要建立孔洞,定義內部路徑的座標必須具有與定義外部路徑之座標相反的順序。例如,如果外部路徑的座標是順時針順序,則內部路徑必須是逆時針順序。

注意:資料圖層會為您處理內部與外部路徑的順序,讓您更輕鬆地繪製具有孔洞的多邊形。請參閱資料圖層的文件

下列範例會以兩個路徑繪製一個多邊形,內部路徑使用與外部路徑相反的方向捲繞。

// This example creates a triangular polygon with a hole in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
  });

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a triangular polygon with a hole in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
  });

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

檢視範例 (polygon-hole.html)

矩形

除了一般 Polygon 類別之外,Google Maps JavaScript API 也包含適用於 Rectangle 物件的特定類別,以簡化它們的建構。

新增矩形

RectanglePolygon 類似,您可以定義矩形邊緣(筆觸)的自訂色彩、粗細和不透明度,為矩形內的區域(填滿)自訂色彩和不透明度。色彩應該使用十六進位數字 HTML 樣式表示。

Rectangle 不同於 Polygon 的地方在於您不需要定義 paths。矩形具有 bounds 屬性,它可指定矩形的 google.maps.LatLngBounds 來定義其形狀。

矩形的 editable 屬性可指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯的形狀。同樣地,您可以設定 draggable 屬性,允許使用者拖曳矩形

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

檢視範例 (rectangle-simple.html)

下列程式碼會在每次使用者變更地圖縮放時建立一個矩形。矩形的大小是由檢視點決定的。

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

檢視範例 (rectangle-zoom.html)

移除矩形

如果要從地圖移除矩形,請呼叫 setMap() 方法並傳遞 null 做為引數。

rectangle.setMap(null);

請注意,上面的方法不會刪除矩形。它只會從地圖移除矩形。如果您想要刪除矩形,應該先從地圖移除它,然後將矩形自身設成 null

圓形

除了一般 Polygon 類別之外,Google Maps JavaScript API 也包含適用於 Circle 物件的特定類別,以簡化它們的建構。

新增圓形

CirclePolygon 類似,您可以定義圓形邊緣(筆觸)的自訂色彩、粗細和不透明度,為圓形內的區域(填滿)自訂色彩和不透明度。色彩應該使用十六進位數字 HTML 樣式表示。

Circle 不同於 Polygon 的地方在於您不需要定義 paths。圓形另外包含兩個可以定義形狀的屬性:

  • center 指定圓形中心的 google.maps.LatLng
  • radius 指定圓形的半徑(以公尺為單位)。

圓形的 editable 屬性指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯的形狀。同樣地,您可以設定 draggable 屬性,允許使用者拖曳圓形

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

檢視範例 (circle-simple.html)

移除圓形

如果要從地圖移除圓形,請呼叫 setMap() 方法並傳遞 null 做為引數。

circle.setMap(null);

請注意,上面的方法不會刪除圓形。它只會從地圖移除圓形。如果您想要刪除圓形,應該先從地圖移除它,然後將圓形自身設成 null

使用者可編輯和可拖曳的形狀

將形狀設定為可編輯將會新增控點到形狀,讓使用者可以使用這些控點,直接在地圖重新定位形狀、調整形狀及調整形狀的大小。您也可以讓形狀成為可拖曳,讓使用者將它移到地圖上的其他位置。

使用者對物件所做的變更在工作階段之間不會保留。如果您要儲存使用者的編輯,必須自行擷取並儲存該資訊。

使形狀可編輯

任何形狀(折線、多邊形、圓形、矩形)皆可設成為使用者可編輯的物件,您只需在形狀的選項中將 editable 設為 true 即可。

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

檢視範例 (user-editable-shapes.html)

使形狀可拖曳

地圖上繪製的形狀預設是固定在某個位置。如果要讓使用者能夠將形狀拖曳到地圖上的其他位置,請在形狀選項中將 draggable 設成 true

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

啟用多邊形或折線的拖曳功能時,您也應該考慮讓多邊形或折線具有測定功能,亦即將 geodesic 屬性設成 true

測定多邊形在移動時將保留真實的地理形狀,使得多邊形在麥卡托投影中往北或往南移動時變得扭曲。非測定多邊形在畫面上一律會保留其最初的外觀。

在測定多邊形中,折線的線段在地球表面上是繪製成兩點之間的最短路徑(假設地球是半圓),與麥卡托投影的直線相反。

如需座標系統的詳細資訊,請參閱 MapTypes 文件。

下列地圖顯示大小和尺寸大約相等的兩個三角形。紅色三角形將其 geodesic 屬性設成 true。請注意它的形狀在往北移動時會改變。

檢視範例 (polygon-draggable.html)

接聽編輯事件

編輯形狀時,會在編輯完成時引發一個事件。這些事件列示如下。

形狀 事件
圓形 radius_changed
center_changed
多邊形 insert_at
remove_at
set_at

多邊形的路徑上必須設定接聽程式。如果多邊形有多個路徑,每個路徑上都必須設定一個接聽程式。

折線 insert_at
remove_at
set_at

折線的路徑上必須設定接聽程式。

矩形 bounds_changed

一些實用的程式碼片段:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

檢視處理矩形上編輯事件的範例:檢視範例 (rectangle-event.html)

接聽拖曳事件

拖曳形狀時,會在拖曳動作的開始、結束,以及拖曳期間引發事件。針對折線、多邊形、圓形和矩形會引發下列事件。

事件 描述
dragstart 於使用者開始拖曳形狀時引發。
drag 於使用者拖曳形狀時會重複引發。
dragend 於使用者停止拖曳形狀時引發。

如需處理事件的詳細資訊,請參閱事件文件

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁