形狀和線條

選取平台: Android iOS JavaScript

您可以將各種形狀加到地圖中。形狀是地圖上的一種物件,與某個經緯度座標相關聯。可用的形狀如下:線條多邊形圓形矩形。此外,您也可以設定形狀供使用者編輯或拖曳

折線

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

加入折線

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

Polyline 是由地圖上一系列直線段繪製而成的物件。建立線條時,您可以在 PolylineOptions 內指定線條筆劃的自訂色彩、粗細和不透明度,但也可以在建立線條後變更這些屬性。折線支援下列筆劃樣式:

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

折線的 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 物件類似,都是由一系列座標依序組成。多邊形是以線條筆劃和填滿區域繪製而成。您可以自訂多邊形外緣 (筆劃) 的顏色、粗細和不透明度,以及外緣以內區域 (填滿) 的顏色和不透明度。顏色應以 16 進位 HTML 格式來表示,不得使用顏色名稱。

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

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

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

注意:如要繪製多邊形,使用資料層是一種簡單的做法。資料層可為您處理多邊形環繞的情況,方便繪製有孔的多邊形。請參閱資料層說明文件

加入多邊形

多邊形區域可能包含數個獨立路徑,因此 Polygon 物件的 paths 屬性會指定一組陣列,其中每個陣列的類型都是 MVCArray。每個陣列都會定義一組單獨依序排列的 LatLng 座標。

如果是只由一條路徑組成的簡易多邊形,您可以使用單一 LatLng 座標陣列建構 Polygon。建構完成後,將這個簡易陣列儲存在 paths 屬性內時,Maps JavaScript API 會將該陣列轉換成一組陣列。如果是由單一路徑組成的多邊形,API 會提供簡易的 getPath() 方法。

多邊形的 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 是由 4 組 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 類似,可讓您自訂矩形外緣 (筆劃) 的色彩、粗細和不透明度,以及矩形內部 (填滿) 的色彩和不透明度。色彩應以 16 進位 HTML 樣式來表示。

有別於 Polygon,您無須定義 Rectanglepaths。不過,矩形的 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,您無須定義 Circlepaths。不過,圓形會有兩個額外屬性來定義形狀:

  • 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
多邊形 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.');
});

如要瞭解系統如何處理矩形編輯事件,請查看範例

監聽拖曳事件

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

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

如要進一步瞭解系統如何處理事件,請參閱事件相關說明文件