Polygons

多段线

google.maps.Polyline

折线是地图上的连接线段的线性叠加层。

此类扩展 MVCObject

通过调用 const {Polyline} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

Polyline
Polyline([opts])
参数
使用传递的 PolylineOptions 创建多段线,用于指定多段线的路径以及绘制多段线时使用的描边样式。在构建多段线时,您可以传递由 LatLngLatLng 组成的 MVCArray 数组,但在实例化时,简单的数组会在多段线内转换为 MVCArray
getDraggable
getDraggable()
参数:无
返回值boolean
返回用户是否可以拖动相应形状。
getEditable
getEditable()
参数:无
返回值boolean
返回用户是否可以修改此形状。
getMap
getMap()
参数:无
返回值Map|null
用于返回附加了此形状的地图。
getPath
getPath()
参数:无
返回值MVCArray<LatLng>
检索路径。
getVisible
getVisible()
参数:无
返回值boolean
用于返回此多边形是否显示在地图上。
setDraggable
setDraggable(draggable)
参数
  • draggableboolean
返回值:无
如果设置为 true,则用户可以将此形状拖动到地图上。geodesic 属性定义拖动模式。
setEditable
setEditable(editable)
参数
  • editableboolean
返回值:无
如果设为 true,用户可以通过拖动顶点和各个路段上显示的控制点来修改此形状。
setMap
setMap(map)
参数
  • mapMap optional
返回值:无
在指定地图上渲染此形状。如果地图设置为 null,系统会移除形状。
setOptions
setOptions(options)
参数
返回值:无
setPath
setPath(path)
返回值:无
设置路径。如需了解详情,请参阅 PolylineOptions
setVisible
setVisible(visible)
参数
  • visibleboolean
返回值:无
如果设为 false,则隐藏此多边形。
继承addListenerbindTogetnotifysetsetValuesunbindunbindAll
click
function(event)
参数
对折线触发 DOM click 事件时会触发此事件。
contextmenu
function(event)
参数
该事件会在 Poyline 上触发 DOM 上下文菜单事件。
dblclick
function(event)
参数
对折线触发 DOM dblclick 事件时会触发此事件。
drag
function(event)
参数
用户拖动多段线时,系统会重复触发此事件。
dragend
function(event)
参数
当用户停止拖动多段线时会触发此事件。
dragstart
function(event)
参数
用户开始拖动多段线时会触发此事件。
mousedown
function(event)
参数
对折线触发 DOM mousedown 事件时会触发此事件。
mousemove
function(event)
参数
对折线触发 DOM mousemove 事件时会触发此事件。
mouseout
function(event)
参数
此事件针对折线 mouseout 触发。
mouseover
function(event)
参数
此事件针对折线 mouseover 触发。
mouseup
function(event)
参数
对折线触发 DOM mouseup 事件时会触发此事件。
rightclick
function(event)
参数
右键点击折线时会触发此事件。

折线选项界面

google.maps.PolylineOptions 接口

多段线对象,用于定义可在多段线上设置的属性。

clickable optional
类型boolean optional
默认true
指示此 Polyline 是否处理鼠标事件。
draggable optional
类型boolean optional
默认false
如果设置为 true,则用户可以将此形状拖动到地图上。geodesic 属性定义拖动模式。
editable optional
类型boolean optional
默认false
如果设为 true,用户可以通过拖动顶点和各个路段上显示的控制点来修改此形状。
geodesic optional
类型boolean optional
默认false
如果设为 true,多边形的边会解读为测地线,并沿地球的弧线显示。如果设置为 false,多边形的边缘将在屏幕空间中渲染为直线。请注意,测地多边形的形状在拖动时可能会发生变化,原因是尺寸相对于地表保持不变。
icons optional
类型Array<IconSequence> optional
要沿着多段线渲染的图标。
map optional
类型Map optional
要在其上显示折线的地图。
path optional
折线坐标的有序序列。可以使用简单的 LatLng 数组或由 LatLng 组成的 MVCArray 来指定此路径。请注意,如果您传递一个简单的数组,系统会将其转换为 MVCArray。在 MVCArray 中插入或移除 LatLng 将会自动更新地图上的多段线。
strokeColor optional
类型string optional
笔触颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
strokeOpacity optional
类型number optional
描边不透明度介于 0.0 和 1.0 之间
strokeWeight optional
类型number optional
描边宽度(单位:像素)
visible optional
类型boolean optional
默认true
此多段线是否在地图上显示。
zIndex optional
类型number optional
相对于其他折线的 zIndex。

IconSequence 接口

google.maps.IconSequence 接口

描述图标在线条上的渲染方式。

如果您的多段线为测地线,那么在默认情况下,针对偏移量和重复距离指定的距离是以米为单位进行计算的。将偏移量或设为像素值会导致系统以屏幕上的像素为单位计算距离。

fixedRotation optional
类型boolean optional
默认false
如果为 true,则序列中的每个图标都具有相同的固定旋转,而不考虑其位于哪个边缘。如果为 false,则序列中的每个图标都会旋转以与其边缘对齐。
icon optional
类型Symbol optional
要在线条上呈现的图标。
offset optional
类型string optional
默认'100%'
距线条起点(图标渲染位置)的距离。该距离可以线条长度百分比(例如“50%”)或像素(例如“50 像素”)表示。
repeat optional
类型string optional
默认0
线上连续图标之间的距离。该距离可以线条长度百分比(例如“50%”)或像素(例如“50 像素”)表示。若要停用图标重复,请指定“0”。

多边形

google.maps.Polygon

多边形(类似于多段线)可定义一组有序的相连坐标。此外,多边形会形成一个闭合环并定义一个填充区域。请参阅开发者指南中的示例,从简单的多边形带孔的多边形开始入手。请注意,您还可以使用数据层创建多边形。数据层为您提供了一种更简单的孔创建方式,因为它会为您处理内外路径的顺序。

此类扩展 MVCObject

通过调用 const {Polygon} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

Polygon
Polygon([opts])
参数
使用传递的 PolygonOptions(用于创建多边形的路径、多边形的边缘的描边样式,以及多边形的内部区域的填充样式)创建多边形。多边形可以包含一个或多个路径,其中每个路径都包含一个 LatLng 数组。在构建这些路径时,您可以传递 LatLng 数组或 LatLngMVCArray。实例化时,数组会在多边形内转换为 MVCArray
getDraggable
getDraggable()
参数:无
返回值boolean
返回用户是否可以拖动相应形状。
getEditable
getEditable()
参数:无
返回值boolean
返回用户是否可以修改此形状。
getMap
getMap()
参数:无
返回值Map|null
用于返回附加了此形状的地图。
getPath
getPath()
参数:无
返回值MVCArray<LatLng>
检索第一条路径。
getPaths
getPaths()
参数:无
返回值MVCArray<MVCArray<LatLng>>
检索此多边形的路径。
getVisible
getVisible()
参数:无
返回值boolean
用于返回此多边形是否显示在地图上。
setDraggable
setDraggable(draggable)
参数
  • draggableboolean
返回值:无
如果设置为 true,则用户可以将此形状拖动到地图上。geodesic 属性定义拖动模式。
setEditable
setEditable(editable)
参数
  • editableboolean
返回值:无
如果设为 true,用户可以通过拖动顶点和各个路段上显示的控制点来修改此形状。
setMap
setMap(map)
参数
  • mapMap optional
返回值:无
在指定地图上渲染此形状。如果地图设置为 null,系统会移除形状。
setOptions
setOptions(options)
参数
返回值:无
setPath
setPath(path)
返回值:无
设置第一条路径。如需了解详情,请参阅 PolygonOptions
setPaths
setPaths(paths)
返回值:无
设置此多边形的路径。
setVisible
setVisible(visible)
参数
  • visibleboolean
返回值:无
如果设为 false,则隐藏此多边形。
继承addListenerbindTogetnotifysetsetValuesunbindunbindAll
click
function(event)
参数
对多边形触发 DOM click 事件时会触发此事件。
contextmenu
function(event)
参数
对多边形触发 DOM 上下文菜单事件时会触发此事件。
dblclick
function(event)
参数
对多边形触发 DOM dblclick 事件时会触发此事件。
drag
function(event)
参数
用户拖动多边形时,系统会重复触发此事件。
dragend
function(event)
参数
当用户停止拖动多边形时会触发此事件。
dragstart
function(event)
参数
用户开始拖动多边形时会触发此事件。
mousedown
function(event)
参数
对多边形触发 DOM mousedown 事件时会触发此事件。
mousemove
function(event)
参数
对多边形触发 DOM mousemove 事件时会触发此事件。
mouseout
function(event)
参数
此事件针对多边形 mouseout 触发。
mouseover
function(event)
参数
此事件针对多边形 mouseover 触发。
mouseup
function(event)
参数
对多边形触发 DOM mouseup 事件时会触发此事件。
rightclick
function(event)
参数
右键点击多边形时会触发此事件。

PolygonOptions 接口

google.maps.PolygonOptions 接口

多边形选项对象,用于定义可在多边形上设置的属性。

clickable optional
类型boolean optional
默认true
指示此 Polygon 是否处理鼠标事件。
draggable optional
类型boolean optional
默认false
如果设置为 true,则用户可以将此形状拖动到地图上。geodesic 属性定义拖动模式。
editable optional
类型boolean optional
默认false
如果设为 true,用户可以通过拖动顶点和各个路段上显示的控制点来修改此形状。
fillColor optional
类型string optional
填充色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
fillOpacity optional
类型number optional
介于 0.0 和 1.0 之间的填充不透明度
geodesic optional
类型boolean optional
默认false
如果设为 true,多边形的边会解读为测地线,并沿地球的弧线显示。如果设置为 false,多边形的边缘将在屏幕空间中渲染为直线。请注意,测地多边形的形状在拖动时可能会发生变化,原因是尺寸相对于地表保持不变。
map optional
类型Map optional
要在其上显示多边形的地图。
paths optional
用于指定闭合环的坐标的有序序列。不同于折线,一个多边形由一条或多条路径组成。因此,路径属性可以指定一个或多个 LatLng 坐标数组。路径会自动关闭;请勿重复路径的第一个顶点作为最后一个顶点。简单的多边形可以使用单个 LatLng 数组定义。更复杂的多边形可以指定数组数组。任何简单的数组都会被转换为 MVCArray。在 MVCArray 中插入或移除 LatLng 将自动更新地图上的多边形。
strokeColor optional
类型string optional
笔触颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
strokeOpacity optional
类型number optional
介于 0.0 和 1.0 之间的笔触不透明度
strokePosition optional
类型StrokePosition optional
描边位置。
strokeWeight optional
类型number optional
描边宽度(单位:像素)
visible optional
类型boolean optional
默认true
此多边形是否显示在地图上。
zIndex optional
类型number optional
相对于其他折线的 zIndex。

PolyMouseEvent 接口

google.maps.PolyMouseEvent 接口

此对象是从多段线上的多边形事件和多边形返回的。

此接口扩展了 MapMouseEvent

edge optional
类型number optional
事件发生时,如果事件发生在可编辑多边形的中点上,那么光标下方路径中边缘的索引值。
path optional
类型number optional
如果发生了顶点且多边形可编辑,则当发生事件时,该路径下的光标索引。否则为 undefined
vertex optional
类型number optional
如果事件发生在顶点上,且多段线或多边形可修改,则事件发生时光标下方顶点的索引。如果某个顶点上未出现该事件,则值为 undefined
继承domEventlatLng
继承stop

矩形

google.maps.Rectangle

矩形叠加层。

此类扩展 MVCObject

通过调用 const {Rectangle} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

Rectangle
Rectangle([opts])
参数
使用传递的 RectangleOptions(用于指定边界和样式)创建一个矩形。
getBounds
getBounds()
参数:无
返回值LatLngBounds|null
传回此矩形的范围。
getDraggable
getDraggable()
参数:无
返回值boolean
返回用户是否可以拖动此矩形。
getEditable
getEditable()
参数:无
返回值boolean
返回此矩形是否可以修改。
getMap
getMap()
参数:无
返回值Map|null
传回显示此矩形的地图。
getVisible
getVisible()
参数:无
返回值boolean
用于返回此矩形是否显示在地图上。
setBounds
setBounds(bounds)
参数
返回值:无
设置此矩形的范围。
setDraggable
setDraggable(draggable)
参数
  • draggableboolean
返回值:无
如果设置为 true,则用户可以将此矩形拖动到地图上。
setEditable
setEditable(editable)
参数
  • editableboolean
返回值:无
如果设为 true,用户可以通过拖动角落和各个边缘上显示的控制点来编辑此矩形。
setMap
setMap(map)
参数
  • mapMap optional
返回值:无
在指定地图上渲染此矩形。如果地图设置为 null,系统会移除这个矩形。
setOptions
setOptions(options)
参数
返回值:无
setVisible
setVisible(visible)
参数
  • visibleboolean
返回值:无
如果设为 false,系统会隐藏此矩形。
继承addListenerbindTogetnotifysetsetValuesunbindunbindAll
bounds_changed
function()
参数:None
当矩形的边界发生变化时会触发此事件。
click
function(event)
参数
对矩形触发 DOM 点击事件时会触发此事件。
contextmenu
function(event)
参数
对矩形触发 DOM contextmenu 事件时会触发此事件。
dblclick
function(event)
参数
对矩形触发 DOM dblclick 事件时会触发此事件。
drag
function(event)
参数
在用户拖动矩形时,系统会重复触发此事件。
dragend
function(event)
参数
当用户停止拖动矩形时会触发此事件。
dragstart
function(event)
参数
用户开始拖动矩形时会触发此事件。
mousedown
function(event)
参数
对矩形触发 DOM mousedown 事件时会触发此事件。
mousemove
function(event)
参数
对矩形触发 DOM mousemove 事件时会触发此事件。
mouseout
function(event)
参数
此事件针对矩形 mouseout 触发。
mouseover
function(event)
参数
此事件针对矩形鼠标悬停事件触发。
mouseup
function(event)
参数
对矩形触发 DOM mouseup 事件时会触发此事件。
rightclick
function(event)
参数
右键点击矩形时会触发此事件。

RectangleOptions 接口

google.maps.RectangleOptions 接口

RectangleOptions 对象,用于定义可在矩形上设置的属性。

bounds optional
范围。
clickable optional
类型boolean optional
默认true
指示此 Rectangle 是否处理鼠标事件。
draggable optional
类型boolean optional
默认false
如果设置为 true,则用户可以将此矩形拖动到地图上。
editable optional
类型boolean optional
默认false
如果设为 true,用户可以通过拖动角落和各个边缘上显示的控制点来编辑此矩形。
fillColor optional
类型string optional
填充色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
fillOpacity optional
类型number optional
介于 0.0 和 1.0 之间的填充不透明度
map optional
类型Map optional
要在其上显示矩形的地图。
strokeColor optional
类型string optional
笔触颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
strokeOpacity optional
类型number optional
介于 0.0 和 1.0 之间的笔触不透明度
strokePosition optional
类型StrokePosition optional
描边位置。
strokeWeight optional
类型number optional
描边宽度(单位:像素)
visible optional
类型boolean optional
默认true
此矩形是否显示在地图上。
zIndex optional
类型number optional
相对于其他折线的 zIndex。

Circle

google.maps.Circle

地球表面的圆形;也称为“球帽”。

此类扩展 MVCObject

通过调用 const {Circle} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

Circle
Circle([circleOrCircleOptions])
参数
使用传递的 CircleOptions(用于创建中心、半径和样式)创建圆形。
getBounds
getBounds()
参数:无
返回值LatLngBounds|null
获取此圆形的 LatLngBounds
getCenter
getCenter()
参数:无
返回值LatLng|null
传回此圆的中心。
getDraggable
getDraggable()
参数:无
返回值boolean
返回用户能否拖动此圆圈。
getEditable
getEditable()
参数:无
返回值boolean
返回用户是否可以编辑此圆圈。
getMap
getMap()
参数:无
返回值Map|null
传回在其上显示此圆的地图。
getRadius
getRadius()
参数:无
返回值number
传回此圆的半径(以米为单位)。
getVisible
getVisible()
参数:无
返回值boolean
用于返回此圆形在地图上是否显示。
setCenter
setCenter(center)
参数
返回值:无
设置此圆的中心。
setDraggable
setDraggable(draggable)
参数
  • draggableboolean
返回值:无
如果设置为 true,则用户可以将此圆形拖动到地图上。
setEditable
setEditable(editable)
参数
  • editableboolean
返回值:无
如果设为 true,用户可以通过拖动圆心及其周围显示的控制点来编辑此圆形。
setMap
setMap(map)
参数
  • mapMap optional
返回值:无
在指定地图上渲染此圆。如果地图设置为 null,圆将会被移除。
setOptions
setOptions(options)
参数
返回值:无
setRadius
setRadius(radius)
参数
  • radiusnumber
返回值:无
设置此圆的半径(以米为单位)。
setVisible
setVisible(visible)
参数
  • visibleboolean
返回值:无
如果设为 false,系统会隐藏此圆圈。
继承addListenerbindTogetnotifysetsetValuesunbindunbindAll
center_changed
function()
参数:None
更改圆心时会触发此事件。
click
function(event)
参数
对圆触发 DOM 点击事件时会触发此事件。
dblclick
function(event)
参数
对圆触发 DOM dblclick 事件时会触发此事件。
drag
function(event)
参数
在用户拖动圆圈时,系统会重复触发此事件。
dragend
function(event)
参数
此事件会在用户停止拖动圆圈时触发。
dragstart
function(event)
参数
用户开始拖动圆形时会触发此事件。
mousedown
function(event)
参数
对圆形触发 DOM mousedown 事件时会触发此事件。
mousemove
function(event)
参数
对圆触发 DOM mousemove 事件时会触发此事件。
mouseout
function(event)
参数
对圆形鼠标悬停触发此事件。
mouseover
function(event)
参数
此事件针对圆圈鼠标悬停触发。
mouseup
function(event)
参数
对圆形触发 DOM mouseup 事件时会触发此事件。
radius_changed
function()
参数:None
当圆圈的半径发生变化时会触发此事件。
rightclick
function(event)
参数
右键点击圆形时会触发此事件。

CircleOptions 接口

google.maps.CircleOptions 接口

用于定义可在 Circle 上设置的属性的 CircleOptions 对象。

center optional
类型LatLng|LatLngLiteral optional
圆形的中心。
clickable optional
类型boolean optional
默认true
指示此 Circle 是否处理鼠标事件。
draggable optional
类型boolean optional
默认false
如果设置为 true,则用户可以将此圆形拖动到地图上。
editable optional
类型boolean optional
默认false
如果设为 true,用户可以通过拖动圆心及其周围显示的控制点来编辑此圆形。
fillColor optional
类型string optional
填充色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
fillOpacity optional
类型number optional
填充透明度,范围为 0.0 到 1.0。
map optional
类型Map optional
要在其上显示圆形的地图。
radius optional
类型number optional
地球表面的半径(以米为单位)。
strokeColor optional
类型string optional
笔触颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。
strokeOpacity optional
类型number optional
描边不透明度介于 0.0 和 1.0 之间
strokePosition optional
类型StrokePosition optional
描边位置。
strokeWeight optional
类型number optional
描边宽度(单位:像素)
visible optional
类型boolean optional
默认true
此圆形在地图上是否显示。
zIndex optional
类型number optional
相对于其他折线的 zIndex。

StrokePosition 常量

google.maps.StrokePosition 常量

多边形描边的可能位置。

通过调用 const {StrokePosition} = await google.maps.importLibrary("maps") 进行访问。请参阅 Maps JavaScript API 中的库

CENTER 描边位于多边形路径的中心,描边的一半位于多边形内部,描边的一半位于多边形之外。
INSIDE 描边位于多边形内。
OUTSIDE 描边位于多边形外部。