圖案和線條

選取平台： Android iOS

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

折線

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

加入折線

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

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

• outerColor：格式為 "#FFFFFF" 的十六進位 HTML 顏色。
• outerWidth：介於 0.0 和 1.0 之間的數值，會解讀為 strokeWidth 的百分比。
• strokeColor：格式為 "#FFFFFF" 的十六進位 HTML 顏色。
• strokeWidth：線條寬度 (以像素為單位)。
• geodesic：多邊形的邊緣是否會沿著地球的曲度，或是以直線繪製。
• altitudeMode：如何解讀座標中的海拔高度元件
• drawsOccludedSegments：布林值，指出是否應繪製遭物件 (例如建築物) 遮蔽的多邊形部分。
• extruded：布林值，指出折線是否應連接至地面。

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();
index.js

互動式折線

下列範例會在註冊點擊事件後，切換折線的 drawsOccludedSegments 屬性。

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();
index.js

多邊形

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

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

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

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

加入多邊形

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

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

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

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();
index.js

互動式多邊形

下例會在註冊點擊事件後，變更多邊形的內外顏色。

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

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();
index.js