形狀

選取平台: Android iOS JavaScript

您可以將各種形狀加到地圖中。形狀是指地圖上的經緯度,代表經緯度座標。您可以使用下列形狀:線條多邊形圓形矩形。 您也可以設定形狀,方便使用者編輯或拖曳圖案

折線

如要在地圖上畫一條線,請使用折線。Polyline 類別定義了地圖上連接線段的線性疊加層。Polyline 物件由 LatLng 地點陣列組成,可建立依序連接各個地點的一系列線段。

添加折線

Polyline 建構函式會採用一組 PolylineOptions 來指定線條的 LatLng 座標,以及一組樣式來調整折線和 #39; 的視覺行為。

Polyline 物件會在地圖上繪製成一系列的直線區隔。建構線條時,您可以在 PolylineOptions 中指定線條筆劃的自訂顏色、粗細和透明度,也可以在建構後變更這些屬性。折線支援下列線條樣式:

  • strokeColor 會指定 "#FFFFFF" 格式的十六進位 HTML 顏色。Polyline 類別不支援已命名顏色。
  • strokeOpacity 會指定 0.01.0 之間的數值,以判斷線條顏色的不透明度。預設值為 1.0
  • strokeWeight 會指定線條的寬度 (以像素為單位)。

折線's editable 屬性可指定使用者是否能編輯形狀。請參閱下方的使用者可編輯的形狀一節。同樣地,您可以設定 draggable 屬性,讓使用者拖曳線條

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

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

  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

刪除折線

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

flightPath.setMap(null);

請注意,上述方法並不會刪除折線,這會從地圖中移除折線。如要刪除折線,請從地圖中移除該折線,然後將折線本身設為 null

檢查折線

折線會將一系列座標指定為 LatLng 物件的陣列。這些座標會決定行的路徑。如要擷取座標,請呼叫 getPath(),以傳回 MVCArray 類型的陣列。您可以使用下列作業來操控及檢查陣列:

  • getAt() 會傳回指定的零值索引值 LatLng
  • insertAt() 會在指定的零值索引值插入插入的 LatLng。請注意,該索引值的任何現有座標都會往後移動。
  • removeAt() 會根據指定的零值索引移除 LatLng

TypeScript

// 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.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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: google.maps.MapMouseEvent) {
  const path = poly.getPath();

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// 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.
let poly;
let 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) {
  const 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.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
查看範例

查看範例

自定義折線

您可以符號的形式,將向量圖加到折線上。透過將符號和 PolylineOptions 類別結合,您可以在地圖上控制折線的外觀和風格。如要瞭解箭頭虛線自訂符號動畫符號,請參閱符號

多邊形

多邊形代表的是封閉路徑 (或迴圈) 的所在區域,由一系列座標定義。Polygon 物件與 Polyline 物件類似,都是由一系列座標依序組成。多邊形是由線條和填色兩大元素繪製而成。您可以定義多邊形邊緣 (筆劃) 的自訂顏色、粗細和透明度,以及封閉區域 (填滿) 的自訂色彩和透明度。顏色應以十六進位 HTML 格式表示。系統不支援顏色名稱。

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

  • 由單一多邊形定義的多個非連續區域。
  • 含有孔洞的區域。
  • 一或多個區域的重疊部分。

如要定義複雜的形狀,請使用包含多個路徑的多邊形。

注意:資料層很適合用來繪製多邊形。這個工具可以為你處理多邊形放鬆情況,讓你更輕鬆地繪製有孔的多邊形。請參閱資料層說明文件

新增多邊形

由於多邊形區域可包含多個路徑,Polygon 物件 paths 屬性會指定陣列陣列,每個類型都是 MVCArray 類型。每個陣列都會定義一組已排序的 LatLng 座標序列。

針對只包含一個路徑的簡單多邊形,您可以使用單一 LatLng 座標陣列建構 Polygon。在建構內含於 paths 屬性中的 Maps JavaScript API 時,Maps JavaScript API 會將簡易陣列轉換成陣列陣列。API 針對內含一個路徑的多邊形提供簡單的 getPath() 方法。

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

TypeScript

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

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

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

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

多邊形自動完成

上述範例中的 Polygon 包含四組 LatLng 座標,但請注意,第一個和最後一個集定義了相同的位置,以完成迴圈。由於多邊形會定義封閉的區域,因此實際操作時,您不需要另外指定一組座標。Maps JavaScript API 會繪製一個筆劃,筆觸任何位置最近一次繪製到第一個位置,藉此促成多邊形。

以下範例與前述範例相同,但省略了最後一個 LatLng查看範例

移除多邊形

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

bermudaTriangle.setMap(null);

請注意,上述方法並不會刪除多邊形,從地圖中移除多邊形。如要刪除多邊形,建議您從地圖中移除多邊形,然後將多邊形本身設為 null

檢查多邊形

多邊形指定的系列座標是陣列陣列,其中每個陣列的類型都是 MVCArray。每個「分葉」陣列是指定單一路徑的 LatLng 座標陣列。如要擷取這些座標,請呼叫 Polygon 物件的 getPaths() 方法。由於陣列是 MVCArray,因此您必須使用下列運算子操控及檢查陣列:

  • getAt() 會傳回指定的零值索引值 LatLng
  • insertAt() 會在指定的零值索引值插入插入的 LatLng。請注意,該索引值的任何現有座標都會往後移動。
  • removeAt() 會根據指定的零值索引移除 LatLng

TypeScript

// 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.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

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

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const 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();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

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

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// 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.
let map;
let 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const 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();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

window.initMap = initMap;
查看範例

查看範例

在多邊形中放置一個孔

如要在多邊形中建立空白區域,您必須建立兩個路徑,一個在一個路徑中。如要建立空格,定義內部路徑的座標必須與定義外部路徑的座標順序相同。舉例來說,如果外部路徑的座標為順時針順序,則內部路徑必須是逆時針方向。

注意:資料層會為您處理內部和外部路徑的順序,方便您繪製含孔的多邊形。 請參閱資料層的說明文件

以下範例繪製含有兩個路徑的多邊形,其中內部路徑的方向與外部路徑相反。

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const 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.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

矩形

除了一般的 Polygon 類別之外,Google Maps JavaScript API 還提供 Rectangle 物件的專屬類別,可簡化建構作業。

添加一個矩形

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

Polygon 不同,也不會為 Rectangle 定義 paths。而是提供矩形的 bounds 屬性,方法是為矩形指定 google.maps.LatLngBounds 以定義形狀。

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

TypeScript

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

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
查看範例

查看範例

以下程式碼會在使用者變更地圖上的縮放時建立矩形。矩形的大小視檢視點而定。

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

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

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
查看範例

查看範例

移除矩形

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

rectangle.setMap(null);

請注意,上述方法並不會刪除矩形,這會將矩形從地圖中移除。如要刪除矩形,請先從地圖中移除矩形,然後將矩形本身設為 null

圓形

除了一般的 Polygon 類別之外,Google Maps JavaScript API 還提供 Circle 物件的專屬類別,可簡化建構作業。

添加一個圓

CirclePolygon 類似,可讓您定義圓形外框 (筆劃) 的自訂顏色、粗細和透明度,以及圓形內部區域 (填滿) 的自訂顏色和透明度。指定顏色請使用 16 進位數字 HTML 樣式。

Polygon 不同,也不會為 Circle 定義 paths。而是有兩個圓形屬性用於定義形狀:

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

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

TypeScript

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

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  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(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

const 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.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
查看範例

查看範例

移除圓形

如要從地圖上移除圓形,請呼叫 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
});

查看範例

將形狀設為可拖曳

根據預設,在地圖上繪製的形狀會固定在某個位置。如要允許使用者將形狀拖曳至地圖上的其他位置,請將形狀選項中的 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,以將多邊形設為測地線。

測地多邊形在移動時會保留原本地理形狀,導致多邊形在麥卡托投影中朝北或南方時變形。非測地多邊形會一律保留初始顯示在畫面上。

在測地折線中,折線是繪製在地球表面上兩點之間的最短路徑,假設地球是球,而不是麥卡托投影中的直線。

如要進一步瞭解座標系統,請參閱地圖和圖塊座標指南。

下方地圖顯示兩個三角形大小和維度相近的三角形。紅色三角形的 geodesic 屬性已設為 true。請注意形狀朝向北方時會如何改變。

查看範例

監聽編輯事件

完成編輯形狀的動作時會引發一個事件,這些事件列於下方。

圖案 事件
圓形 radius_changed
center_changed
Polygon insert_at
remove_at
set_at

監聽器必須設定在多邊形的路徑上。如果多邊形有多個路徑,就必須為每個路徑設定事件監聽器。

Polyline insert_at
remove_at
set_at

監聽器必須設定在折線的路徑上。SYZYGY: ICE, translation fix: 接聽程式 > 監聽器 (this is from GTT glossary).

矩形 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.');
});

請參閱如何處理矩形中的編輯事件範例:查看範例

監聽拖曳事件

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

事件 說明
dragstart 使用者開始拖曳形狀時引發。
drag 使用者拖曳形狀時重複引發。
dragend 使用者停止拖曳形狀時引發。

若要進一步瞭解如何處理事件,請參閱事件說明文件