形状

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
选择平台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 对象类似,因为它们都包含一系列有序的坐标。多边形通过笔触和填充来绘制。您可以定义多边形边(笔触)的自定义颜色、粗细和不透明度,以及封闭区域(填充)的自定义颜色和不透明度。颜色应以十六进制 HTML 格式表示。不支持颜色名称。

Polygon 对象可以描述复杂的形状,包括:

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

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

注意:数据层提供了一种绘制多边形的简单方法。它可为您处理多边形环绕,从而可让您更轻松地绘制有孔的多边形。请参阅关于数据层的文档

添加多边形

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

对于仅包含一条路径的简单多边形,您可以使用单个 LatLng 坐标数组构造 Polygon。构建简单的数组后,Maps JavaScript API 会在将其存储在 paths 属性中时将其转换为数组数组。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 包含四组 LatLng 坐标,但请注意,其中第一组和最后一组定义了相同的位置,从而完成循环。不过,实际上由于多边形定义的就是封闭区域,因此您无需指定最后一组坐标。Maps JavaScript API 将通过绘制一笔,将任何给定路径的最后一个位置连回第一个位置,自动完成多边形。

以下示例与上一个示例相同,只是省略了最后一个 LatLng查看示例

移除多边形

如需从地图中移除多边形,请调用以参数形式传递 nullsetMap() 方法。在以下示例中,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 类似,您可以定义圆形边缘(笔触)的自定义颜色、粗细和不透明度,以及圆形内部区域(填充)的自定义颜色和不透明度。颜色应以十六进制数值 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。请注意在其向北移动时形状的变化。

查看示例

侦听编辑事件

如果对某形状进行了修改,则系统会在修改完成后触发相关事件。下面列出了这些事件。

Shape(形状) 事件
圆形 radius_changed
center_changed
Polygon insert_at
remove_at
set_at

监听器必须设置在多边形的路径上。如果多边形有多个路径,则必须在每个路径上设置监听器。

Polyline 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 当用户停止拖动形状时触发。

如需详细了解如何处理事件,请参阅事件文档