圖案和線條

選取平台： Android iOS

您可以將各種形狀加到地圖中。形狀是地圖上的一種物件，與 LatLng 座標系統相關聯。Maps JavaScript API 的擬真 3D 地圖支援在地圖上加入線條和多邊形。

折線

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

加入折線

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

折線物件在地圖上繪製為一系列直線段。建立線條時，您可以在 Polyline3DElementOptions 內指定線條筆劃的自訂色彩、寬度、不透明度、高度和幾何圖形樣式選項，但也可以在建立線條後變更這些屬性。折線支援下列筆劃樣式：

  • outerColor：十六進位 HTML 顏色，格式為 "#FFFFFF"。
  • outerWidth：介於 0.0 和 1.0 之間的數值，會解讀為 strokeWidth 的百分比。
  • strokeColor：十六進位 HTML 顏色，格式為 "#FFFFFF"。
  • strokeWidth：線條寬度 (以像素為單位)。
  • geodesic：多邊形的邊緣是否會沿著地球的曲率繪製，或是以直線繪製。
  • altitudeMode：如何解讀座標中的高度元件
  • drawsOccludedSegments：布林值，指出是否應繪製多邊形中遭遮蔽的部分 (例如建築物)。
  • extruded：布林值，表示折線是否應連線至地面。
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

互動式折線

以下範例會在註冊點擊事件後，變更折線的筆觸顏色。

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

多邊形

多邊形是指封閉式路徑 (或迴圈) 圍起的區域，以一系列座標定義而成。Polygon 物件與 Polyline 物件類似，都是由一系列座標依序組成。多邊形是以線條筆劃和填滿區域繪製而成。您可以為多邊形邊緣 (筆劃) 定義自訂顏色和寬度，以及封閉區域 (填滿) 的自訂顏色和不透明度。顏色應以 16 進位 HTML 格式來表示，不得使用顏色名稱。

Polygon 物件可描述複雜的形狀，包括：

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

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

加入多邊形

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

如果是只由一條路徑組成的簡易多邊形，您可以使用單一 LatLng 座標陣列建構 Polygon。建構完成後，將這個陣列儲存在 outerCoordinates 屬性內時，Maps JavaScript API 的擬真 3D 地圖會將該陣列轉換成一組陣列。

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

互動式多邊形

以下範例會在註冊點擊事件後，變更多邊形的筆觸顏色。

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();