此页面由 Cloud Translation API 翻译。

形状和线条

请选择平台： Android iOS

您可以向地图添加各种形状。形状是地图上的一种对象，与 LatLng 坐标系相关联。Maps JavaScript API 中的仿真 3D 地图支持向地图添加线条和多边形。

多段线

要在地图上绘制线条，可以使用多段线。Polyline3DElement 类可定义地图上的线性相连线段叠加层。Polyline 对象包含一组 LatLng 位置，并可创建一系列线段，依照先后次序将这些位置连接起来。

添加多段线

Polyline 构造函数可接受一组 Polyline3DElementOptions（用于指定线条的 LatLng 坐标）和一组样式（用于调整多段线的视觉行为）。

多段线对象在地图上绘制为一系列直线段。您可以在构建线条时通过 Polyline3DElementOptions 指定线条描边的自定义颜色、宽度、不透明度、高度和几何样式选项，也可以在构建后更改这些属性。多段线支持下列描边样式：

outerColor：格式为 "#FFFFFF" 的十六进制 HTML 颜色。
outerWidth：介于 0.0 和 1.0 之间的数值，可解读为 strokeWidth 的百分比。
strokeColor：格式为 "#FFFFFF" 的十六进制 HTML 颜色。
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 对象类似，因为它们都包含一系列有序的坐标。多边形使用描边和填充区绘制而成。您可以为多边形的边缘（描边）定义自定义颜色和宽度，并为封闭区域（填充区）定义自定义颜色和不透明度。颜色应以十六进制 HTML 格式表示，不支持颜色名称。

Polygon 对象可以描述复杂形状，其中包括：

由单个多边形定义的多个不连续区域。
带孔的区域。
一个或多个区域的交集。

要定义复杂形状，需要使用包含多条路径的多边形。

添加多边形

由于多边形区域可能包含多条单独路径，因此 Polygon 对象的路径属性会指定一个数组的数组，其中每个数组的类型均为 MVCArray。每个数组都会定义一个单独的有序 LatLng 坐标序列。

对于仅包含一条路径的基本多边形，您可以只使用一个 LatLng 坐标数组来构建 Polygon。在构建完成后将此数组存储到 outerCoordinates 属性内时，Maps JavaScript API 会将其转换为一个数组的数组。

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();