# 地图

# createMapContext

createMapContext(string mapId)

创建 map 上下文 MapContext 对象。

参数

参数 string mapId map 组件的 id

返回值

MapContext

# MapContext

# MapContext.addArc

添加弧线,途经点与夹角必须设置一个

参数

Object object

属性 类型 默认值 必填 说明
id number 圆弧 id
start Object 起始点
end Object 终点
pass Object 途经点
angle number 0 夹角角度
width number 5 线宽
color number #000000 线的颜色
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.start 的结构属性

属性 类型 默认值 必填 说明
longitude number 经度
latitude numbe 纬度

object.end 的结构属性

属性 类型 默认值 必填 说明
longitude number 经度
latitude numbe 纬度

object.pass 的结构属性

属性 类型 默认值 必填 说明
longitude number 经度
latitude numbe 纬度

# MapContext.addCustomLayer

添加个性化图层

参数

Object object

属性 类型 默认值 必填 说明
layerId string 个性化图层id
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.addGroundOverlay

创建自定义图片图层,图片会随着地图缩放而缩放

参数

Object object

属性 类型 默认值 必填 说明
id String 图片图层 id
src String 图片路径,支持网络图片、临时路径、代码包路径
bounds Object 图片覆盖的经纬度范围
visible Boolean true 是否可见
zIndex Number 1 图层绘制顺序
opacity Number 1 图层透明度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.bounds 的结构属性

属性 类型 默认值 必填 说明
southwest Object 西南角经纬度
northeast Object 东北角经纬度

bounds.southwest 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

bounds.northeast 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

# MapContext.addMarkers

添加 marker。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
markers Array 同传入 map 组件的 marker 属性
clear boolean false 是否先清空地图上所有 marker iOS不支持
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.addVisualLayer

不支持

# MapContext.fromScreenLocation

返回地图左上角经纬度。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.getCenterLocation

获取当前地图中心的经纬度。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
iconPath string 图标路径,支持网络路径、本地路径、代码包路径 iOS不支持
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.getRegion

获取当前地图的视野范围。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.getRotate

获取当前地图的旋转角。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.getScale

获取当前地图的缩放级别。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.getSkew

获取当前地图的倾斜角。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.includePoints

缩放视野展示所有经纬度。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:❌


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
points Array.Object> 要显示在可视区域内的坐标点列表
padding Array.number> 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左]。 Android谷歌地图上只能识别数组第一项,上下左右的padding一致
IDE不支持
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.initMarkerCluster

初始化点聚合的配置,未调用时采用默认配置。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:❌ Android:✅ 不支持enableDefaultStyle IDE:❌


百度地图(仅iOS、Android支持)
iOS:❌ Android:✅ 不支持enableDefaultStyle


腾讯地图(仅iOS、Android支持)
iOS:❌ Android:✅ 不支持enableDefaultStyle


谷歌地图(仅Android支持)
✅ 不支持enableDefaultStyle

# 参数

属性 类型 默认值 必填 备注 其他
enableDefaultStyle boolean true 启用默认的聚合样式
zoomOnClick boolean true 点击已经聚合的标记点时是否实现聚合分离
gridSize number 60 聚合算法的可聚合距离,即距离小于该值的点会聚合至一起,以像素为单位
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.moveAlong

沿指定路径移动 marker,用于轨迹回放等场景。动画完成时触发回调事件,若动画进行中,对同一 marker 再次调用 moveAlong 方法,前一次的动画将被打断。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
markerId number 指定 marker
path Array 移动路径的坐标串,坐标点格式 {longitude, latitude}
autoRotate boolean true 根据路径方向自动改变 marker 的旋转角度 iOS不支持
IDE不支持,默认不改变marker旋转角度
duration number 平滑移动的时间
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.moveToLocation

将地图中心移置当前定位点。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
longitude number 经度
latitude number 纬度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.on

监听地图事件:'markerClusterCreate'缩放或拖动导致新的聚合簇产生时触发,仅返回新创建的聚合簇信息; 'markerClusterClick'聚合簇的点击事件。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:❌ Android:✅ 不支持markerClusterCreate IDE:❌


百度地图(仅iOS、Android支持)
iOS:❌ Android:✅ 不支持markerClusterCreate


腾讯地图(仅iOS、Android支持)
iOS:❌ Android:✅ 不支持markerClusterCreate


谷歌地图(仅Android支持)
✅ 不支持markerClusterCreate

# 示例代码

  MapContext.on('markerClusterCreate', (res) => {})
  MapContext.on('markerClusterClick', (res) => {})

# MapContext.openMapApp

拉起地图APP选择导航。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:❌


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
longitude Number 目的地经度
latitude Number 目的地纬度
destination String 目的地名称
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.removeCustomLayer

移除个性化图层。

# 参数

Object object

属性 类型 默认值 必填 说明
layerId string 个性化图层id
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.removeGroundOverlay

移除自定义图片图层

# 参数

Object object

属性 类型 默认值 必填 说明
id string 图片图层id
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.removeMarkers

移除 marker。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

Object object

属性 类型 默认值 必填 备注
markerIds Array marker 的 id 集合。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.setBoundary

限制地图的显示范围

# 参数

Object object

属性 类型 默认值 必填 备注
southwest Object 西南角经纬度
northeast Object 东北角经纬度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

bounds.southwest 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

bounds.northeast 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

# MapContext.removeVisualLayer

不支持。

# MapContext.setCenterOffset

设置地图中心点偏移,向后向下为增长,屏幕比例范围(0.25~0.75),默认偏移为[0.5, 0.5]。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:❌


百度地图(仅iOS、Android支持)
iOS:❌ Android:❌


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
offset Array.number> 偏移量,两位数组
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.setLocMarkerIcon

设置定位点图标,支持网络路径、本地路径、代码包路径。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:❌


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
iconPath string 图标路径,支持网络路径、本地路径、代码包路径
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.toScreenLocation

获取经纬度对应的屏幕坐标,坐标原点为地图左上角。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:❌


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.translateMarker

平移marker,带动画。


支持度:
系统地图(仅iOS支持)


高德地图
iOS:✅ Android:✅ IDE:✅


百度地图(仅iOS、Android支持)
iOS:✅ Android:✅


腾讯地图(仅iOS、Android支持)
iOS:✅ Android:✅


谷歌地图(仅Android支持)

# 参数

属性 类型 默认值 必填 备注 其他
markerId Number 指定 marker
destination Object 指定 marker 移动到的目标点
autoRotate boolean 移动过程中是否自动旋转 marker iOS不支持
IDE不支持,默认不改变marker旋转角度
rotate Number marker 的旋转角度 iOS不支持
moveWithRotate boolean false 平移和旋转同时进行 iOS不支持
IDE不支持
duration Number 1000 动画持续时长,平移与旋转分别计算
animationEnd function 动画结束回调函数
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.updateGroundOverlay

更新自定义图片图层

参数

Object object

属性 类型 默认值 必填 说明
id String 图片图层 id
src String 图片路径,支持网络图片、临时路径、代码包路径
bounds Object 图片覆盖的经纬度范围
visible Boolean true 是否可见
zIndex Number 1 图层绘制顺序
opacity Number 1 图层透明度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.bounds 的结构属性

属性 类型 默认值 必填 说明
southwest Object 西南角经纬度
northeast Object 东北角经纬度

bounds.southwest 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

bounds.northeast 的结构属性

结构属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度