导航|地址|刷新
地图 | “人民网+”小程序 | 开放平台










“人民网+”小程序|文档中心






指引

开发

数据

设计

运营











# 地图

# 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		是	纬度

------
导航页 打开网址