示例中心
功能在线体验
控制台

高德 开发 室内地图 JS API 开发指南 在地图上绘制 矢量图层

更新时间:2017年03月07日

路径

一个抽象类,它包含选项和矢量叠加(多边形,折线,圆)之间共享的常量。

属性

Option

Type

Default

Description

stroke

Boolean

true

是否绘制笔划沿路径。

将它设置为false ,以禁用多边形或圆形边界。

color

String

'#03f'

描边色。

weight

Number

5

笔画宽度。

opacity

Number

0.5

不透明度.

fill

Boolean

depends

是否使用颜色填充路径。

将它设置为false禁用填充多边形上或圆。

fillColor

String

same as color

填充颜色。

fillOpacity

Number

0.2

填充不透明度。

事件

Event

Data

Description

click

MouseEvent

单击.

dblclick

MouseEvent

双击.

mousedown

MouseEvent

鼠标按下.

mouseover

MouseEvent

鼠标经过.

mouseout

MouseEvent

鼠标离开.

contextmenu

MouseEvent

右键.

add

Event

添加到地图后.

remove

Event

从地图删除后.

方法

Method

returns

Description

addTo( <Map> map )

this

添加图层到地图。

bindPopup( <String> html |<HTMLElement> el

| <Popup> popup,<Popup options> options? )

this

绑定信息窗体.

bindPopup( <Popup> popup,<Popup options> options? )

this

绑定信息窗体.

unbindPopup()

this

解除信息窗体的绑定.

openPopup( <LatLng> latlng? )

this

打开信息窗体.

closePopup()

this

关闭信息窗体.

Method

Returns

Description

addTo( <Map> map )

this

添加图层到地图。

折线

示例代码

// 创建一条折线
var polyline = Indoor.polyline(latlngs, {color: 'red'}).addTo(map);
// 调整地图视野范围
map.fitBounds(polyline.getBounds());

创建

Factory

Description

Indoor.polyline( <LatLng[]> latlngs, <Polyline options> options? )

通过传入LatLng数组和选项实例化折线.

选项

Option

Type

Default

Description

noClip

Boolean

false

是否允许裁剪.

方法

Method

returns

Description

addLatLng( <LatLng> latlng )

this

添加折线点.

setLatLngs( <LatLng[]> latlngs )

this

设置折线点数组.

getLatLngs()

LatLng[]

返回折线点数组.

折线集

创建

Factory

Description

Indoor.multiPolyline( <LatLng[][]> latlngs, <Polyline options> options? )

传入多个LatLng数组来创建折线集.

方法

Method

returns

Description

setLatLngs( <LatLng[][]> latlngs )

this

设置折线集的折线点数组.

getLatLngs()

<LatLng[][]> latlngs

获取折线集的折线点数组.

openPopup()

this

打开已经绑定的信息窗体 bindPopup.

多边形

Factory

Description

Indoor.polygon( <LatLng[]> latlngs, <Polyline options> options? )

传入LatLng数组创建多边形

多边形集

创建

Factory

Description

Indoor.multiPolygon( <LatLng[][]> latlngs, <Polyline options> options? )

传入多个LatLng数组来创建多边形集.

方法

Method

returns

Description

setLatLngs( <LatLng[][]> latlngs )

this

设置多边形集的折线点数组.

getLatLngs()

<LatLng[][]> latlngs

获取多边形集的折线点数组.

openPopup()

this

打开已经绑定的信息窗体 bindPopup.

矩形

示例

// 定义矩形的对角坐标
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// 添加矩形到地图,边框颜色#ff7800和边框大小1
Indoor.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
//调整地图视图
map.fitBounds(bounds);

创建

Factory

Description

Indoor.rectangle(<LatLngBounds> bounds, <Path options> options? )

实例化一个矩形对

方法

Method

returns

Description

setBounds( <LatLngBounds> bounds )

this

设置矩形范围.

圆形

创建

Factory

Description

Indoor.circle( <LatLng> latlng, <Number>

radius, <Path options> options? )

传入圆心坐标,半径,实例化一个圆形.

方法

Method

returns

Description

getLatLng()

LatLng

获取圆心坐标.

getRadius()

Number

获取半径.

setLatLng( <LatLng> latlng )

this

设置圆形圆心所在坐标位置.

setRadius( <Number> radius )

this

设置圆形半径.

圆形标记

创建

Factory

Description

Indoor.circleMarker(<LatLng> latlng,<Path options> options? )

实例一个圆形标记,默认半径为10像素

方法

Method

returns

Description

setLatLng( <LatLng> latlng )

this

设置圆心所有位置.

setRadius( <Number> radius )

this

设置半径.

示例中心 功能
在线体验
常见问题