Google地图官方API-在地图上绘图（自定义形状）

2021-12-25 03:56:23

形状
您可以向地图添加各种形状。形状是地图上的一个对象，与纬度/经度坐标相关联。可以使用以下形状：线，多边形，圆形和矩形。您还可以配置形状，以便用户可以编辑或拖动它们。

折线
要在地图上画一条线，请使用多段线。的类定义在地图上连接线段的线性叠加。甲对象由一个阵列的位置，并产生一系列的连接以有序序列的那些位置的线段。 PolylinePolylineLatLng

添加折线
该Polyline构造函数采用一组 PolylineOptions指定LatLng 的线的坐标和一组样式来调整折线的视觉行为。

Polyline对象在地图上绘制为一系列直线段。您可以PolylineOptions在构造线条时为线条的笔触指定自定义颜色，粗细和不透明度，也可以在构造之后更改这些属性。折线支持以下笔触样式：

strokeColor指定格式的十六进制HTML颜色 "#FFFFFF"。本Polyline类不支持命名的颜色。
strokeOpacity在0.0和之间指定一个数值，1.0以确定线条颜色的不透明度。默认值为1.0。
strokeWeight 指定线条的宽度（以像素为单位）。
折线的editable属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，您可以设置draggable属性以允许用户拖动线。

// 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() {
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'

});

var 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}

];
var flightPath = new google.maps.Polyline({

path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2

});

flightPath.setMap(map);
}

查看示例。

删除折线
要从地图中删除折线，请调用作为参数setMap()传递的方法null。在下面的示例中， flightPath是一个折线对象：

flightPath.setMap(null);

请注意，上述方法不会删除折线。它只是从地图上删除折线。相反，如果您希望删除折线，则应将其从地图上删除，然后将折线本身设置为null。

查看示例。

检查折线
一条折线将一系列坐标指定为LatLng对象数组。这些坐标确定线的路径。要检索坐标，请调用getPath()，这将返回type数组MVCArray。您可以使用以下操作来操纵和检查阵列：

getAt()返回LatLng给定的从零开始的索引值。
insertAt()LatLng 在给定的从零开始的索引值处插入一个传递。请注意，该索引值处的所有现有坐标都将向前移动。
removeAt()删除LatLng给定的从零开始的索引值。
注意：您不能使用语法简单地检索数组的第i个元素 mvcArray[i]。您必须使用 mvcArray.getAt(i)。
// 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.

var poly;
var 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) {
var 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.
var marker = new google.maps.Marker({

position: event.latLng,
title: '#' + path.getLength(),
map: map

});
}

查看示例。

自定义折线
您可以将基于矢量的图像以符号的形式添加到折线中。结合使用符号和PolylineOptions类，您可以对地图上折线的外观和感觉进行大量控制。见符号有关的信息箭头，虚线，自定义符号和动画符号。

多边形
多边形表示由闭合路径（或循环）包围的区域，该闭合路径由一系列坐标定义。对象与对象相似，因为它们由一系列有序序列的坐标组成。用描边和填充绘制多边形。您可以为多边形的边缘（笔触）定义自定义颜色，权重和不透明度，为封闭区域（填充）定义自定义颜色和不透明度。颜色应以十六进制HTML格式表示。不支持颜色名称。 PolygonPolyline

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

由一个多边形定义的多个非连续区域。
带有孔的区域。
一个或多个区域的交叉点。
要定义复杂的形状，请使用具有多个路径的多边形。

注意： “数据”层提供了一种绘制多边形的简单方法。它可以为您处理多边形缠绕，从而更容易绘制带有孔的多边形。请参阅数据层的文档。

添加多边形
由于多边形区域可能包含多个单独的路径，因此 Polygon对象的paths属性指定了一个数组数组，每个数组类型都是type MVCArray。每个数组定义一个单独的有序LatLng坐标序列。

对于仅包含一条路径的简单多边形，您可以Polygon使用单个LatLng坐标数组构造一个。将Maps JavaScript API存储在paths属性中时，构造后会将其转换为数组数组。API为getPath()包含一条路径的多边形提供了一种简单的方法。

注意：如果以这种方式构造一个简单的多边形，您仍然需要通过将路径作为操纵从多边形中检索值MVCArray。
多边形的editable属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，您可以设置draggable属性以允许用户拖动shape。

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
var 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.
var triangleCoords = [

{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}

];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({

paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35

});
bermudaTriangle.setMap(map);
}

查看示例。

多边形自动补全
在Polygon上面的例子包括四组的 LatLng坐标，但通知的是，第一和最后一个集定义相同的位置，从而完成循环。但是，实际上，由于多边形定义了封闭区域，因此您无需指定最后一组坐标。Maps JavaScript API会通过绘制笔触将任意给定路径的最后一个位置连接回第一个位置来自动完成多边形。

以下示例与上一个示例相同，但LatLng省略了最后一个： view example。

删除多边形
要从地图中删除多边形，请调用作为参数setMap()传递的方法null。在以下示例中， bermudaTriangle是一个多边形对象：

bermudaTriangle.setMap(null);

请注意，上述方法不会删除多边形。它只是从地图上删除多边形。相反，如果您要删除多边形，则应将其从地图中删除，然后将多边形本身设置为null。

删除多边形类似于删除折线。要查看折线的实际代码：查看示例。
检查多边形
多边形将其坐标系列指定为数组数组，其中每个数组的类型都是MVCArray。每个“叶”数组都是LatLng指定单个路径的坐标数组。要检索这些坐标，请调用 Polygon对象的getPaths()方法。由于该数组是一个数组，因此MVCArray您需要使用以下操作来对其进行操作和检查：

getAt()返回LatLng给定的从零开始的索引值。
insertAt()LatLng 在给定的从零开始的索引值处插入一个传递。请注意，该索引值处的所有现有坐标都将向前移动。
removeAt()删除LatLng给定的从零开始的索引值。
注意：您不能使用语法简单地检索数组的第i个元素 mvcArray[i]。您必须使用 mvcArray.getAt(i)。
// 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.

var map;
var 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.
var triangleCoords = [

  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}

];

// Construct the polygon.
var 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;
}

/* @this {google.maps.Polygon} /
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();

var contentString = 'Bermuda Triangle polygon
' +

  'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
  '<br>';

// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {

var 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);
}

查看示例。

在多边形上放一个洞
要在多边形内创建空白区域，您需要创建两条路径，一条在另一条路径内。要创建孔，定义内部路径的坐标必须与定义外部路径的坐标相反。例如，如果外部路径的坐标为顺时针方向，则内部路径必须为逆时针方向。

注意： “数据”层可为您处理内部和外部路径的顺序，从而更容易绘制带有孔的多边形。请参阅数据层的文档。

下面的示例绘制具有两条路径的多边形，内部路径的缠绕方向与外部路径相反。

// This example creates a triangular polygon with a hole in it.

function initMap() {
var 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.
var outerCoords = [

{lat: 25.774, lng: -80.190},
{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.
var innerCoords = [

{lat: 28.745, lng: -70.579},
{lat: 29.570, lng: -67.514},
{lat: 27.339, lng: -66.668}

];

// Construct the polygon, including both paths.
var bermudaTriangle = new google.maps.Polygon({

paths: [outerCoords, innerCoords],
strokeColor: '#FFC107',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC107',
fillOpacity: 0.35

});
bermudaTriangle.setMap(map);
}

查看示例。

长方形
除了通用Polygon类之外，Google Maps JavaScript API还包括一个用于对象的特定类，以简化其构造。 Rectangle

添加一个矩形
A Rectangle与a相似Polygon，您可以为矩形的边缘（笔触）定义自定义颜色，粗细和不透明度，为矩形内的区域（填充）定义自定义颜色和不透明度。颜色应以十六进制数字HTML样式表示。

不像Polygon，你不定义paths 为一个Rectangle。相反，矩形具有bounds 通过为矩形指定a 来定义其形状的属性。 google.maps.LatLngBounds

矩形的editable属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，您可以设置draggable属性以允许用户拖动矩形。

// This example adds a red rectangle to a map.

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'

});

var rectangle = new google.maps.Rectangle({

strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
  north: 33.685,
  south: 33.671,
  east: -116.234,
  west: -116.251
}

});
}

查看示例。

每次用户更改地图缩放时，以下代码都会创建一个矩形。矩形的大小由视口确定。

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 11,
center: {lat: 40.748520, lng: -73.981687},
mapTypeId: 'terrain'

});

var rectangle = new google.maps.Rectangle();

map.addListener('zoom_changed', function() {

// 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: map,
  bounds: map.getBounds()
});

});
}

查看示例。

删除矩形
要从地图中删除矩形，请调用作为参数setMap()传递的方法null。

rectangle.setMap(null);

请注意，上述方法不会删除矩形。它只是从地图上删除矩形。如果您想删除矩形，则应将其从地图上删除，然后将矩形本身设置为null。

删除矩形类似于删除折线。要查看折线的实际代码：查看示例。
界
除了通用Polygon类之外，Google Maps JavaScript API还包括一个用于对象的特定类，以简化其构造。 Circle

添加圈子
A Circle与a相似Polygon，您可以为圆的边缘（笔触）定义自定义颜色，粗细和不透明度，为圆内的区域（填充）定义自定义颜色和不透明度。颜色应以十六进制数字HTML样式表示。

不像Polygon，你不定义paths 为一个Circle。取而代之的是，圆具有两个附加属性来定义其形状：

center指定google.maps.LatLng 圆心的。
radius 以米为单位指定圆的半径。
圆的editable属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，您可以设置draggable属性以允许用户拖动圆圈。

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var 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.
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,
center: {lat: 37.090, 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 (var city in citymap) {

// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  center: citymap[city].center,
  radius: Math.sqrt(citymap[city].population) * 100
});

}
}

查看示例。

删除圈子
要从地图上删除一个圆，请调用作为参数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.');
});

请参见处理矩形上的编辑事件的示例： view example。

听拖动事件
拖动形状时，在拖动动作的开始和结束以及拖动期间会触发事件。折线，多边形，圆形和矩形会触发以下事件。

事件描述
dragstart 当用户开始拖动形状时触发。
drag 用户拖动形状时反复触发。
dragend 当用户停止拖动形状时触发。
有关处理事件的更多信息，请参阅有关事件的文档。

码农公寓

相关文章