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










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






指引

开发

数据

设计

运营











# 地图组件


iOS使用地图组件需要集成扩展SDK/MapSDK（系统地图使用扩展SDK，第三方地图使用MapSDK）

iOS集成扩展SDK/MapSDK请参考「小程序 SDK-iOS SDK-iOS 集成」



Android使用地图组件需要集成MapSDK

Android集成MapSDK请参考「小程序 SDK-Android SDK-Android 集成-6. MapSDK」


# 系统地图(仅iOS支持)

属性	类型	默认值	必填	说明	支持度
longitude	number	116.46	是	中心经度	✅
latitude	number	39.92	是	中心纬度	✅
scale	number	16	否	缩放级别，取值范围为3-20	✅
min-scale	number	3	否	最小缩放级别（手势进行缩放时，不收这个属性控制）	✅
max-scale	number	20	否	最大缩放级别（手势进行缩放时，不收这个属性控制）	✅
markers	Array.marker		否	标记点	✅
polyline	Array.polyline		否	路线	✅
circles	Array.circle		否	圆	✅
controls	Array.control		否	控件（即将废弃，建议使用 cover-view 代替）	❌
include-points	Array.point		否	缩放视野以包含所有给定的坐标点	✅
show-location	boolean	false	否	显示带有方向的当前定位点	✅
polygons	Array.polygon		否	多边形	✅
subkey	-		否	个性化地图暂不支持	❌
layer-style	-		否	个性化地图暂不支持	❌
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角	❌
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角	❌
enable-3D	boolean	false	否	展示3D楼块	✅
show-compass	boolean	false	否	显示指南针	✅
show-scale	boolean	false	否	显示比例尺	✅
enable-overlooking	boolean	false	否	开启俯视	❌
enable-zoom	boolean	true	否	是否支持缩放	✅
enable-scroll	boolean	true	否	是否支持拖动	✅
enable-rotate	boolean	false	否	是否支持旋转	✅
enable-satellite	boolean	false	否	是否开启卫星图	✅
enable-traffic	boolean	false	否	是否开启实时路况	✅
enable-poi	boolean	true	否	是否展示 POI 点	✅
enable-building	boolean		否	是否展示建筑物	✅
setting	object		否	配置项 setting内容与属性配置冲突时，以setting的为准	✅
bindtap	eventhandle		否	点击地图时触发，返回经纬度信息	❌
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}	❌
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}	❌
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}	❌
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}	❌
bindupdated	eventhandle		否	在地图渲染更新完成时触发	❌
bindregionchange	eventhandle		否	视野发生变化时触发	✅
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}	❌
bindanchorpointtap	eventhandle		否	点击定位标时触发，e.detail = {longitude, latitude}	❌

# marker

属性	说明	类型	必填	备注	支持度
id	标记点 id	number	否	marker 点击事件回调会返回此 id。	✅
clusterId	聚合簇的 id	number	否	自定义点聚合簇效果时使用	✅
joinCluster	是否参与点聚合	Boolean	否	默认不参与点聚合	❌
latitude	纬度	number	是	浮点数，范围 -90 ~ 90	✅
longitude	经度	number	是	浮点数，范围 -180 ~ 180	✅
title	标注点名	string	否	点击时显示，callout存在时将被忽略	✅
zIndex	显示层级	number	否		❌
iconPath	显示的图标	string	是	项目目录下的图片路径，支持网络路径、本地路径、代码包路径	✅
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0	❌
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1	❌
width	标注图标宽度	number/string	否	默认为图片实际宽度	❌
height	标记点	number	否	默认为图片实际高度	❌
callout	标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	✅
customCallout	标记点	object	否		❌
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	❌
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	❌
aria-label	无障碍访问，（属性）元素的额外描述	string	否		❌

# marker 上的气泡 callout

属性	说明	类型	备注	支持度
content	文本	string		✅
color	文本颜色	string		❌
fontSize	文字大小	number		❌
borderRadius	边框圆角	number		❌
borderWidth	边框宽度	string		❌
borderColor	边框颜色	string		❌
bgColor	背景色	string		❌
padding	文本边缘留白	number		❌
display	'BYCLICK':点击显示; 'ALWAYS':常显	string		❌
textAlign	文本对齐方式。有效值: left, right, center	string		❌
anchorX	横向偏移量，向右为正数	number		❌
anchorY	纵向偏移量，向下为正数	number		❌

# marker 上的气泡 customCallout

customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

属性	说明	类型	备注	支持度
display	'BYCLICK':点击显示; 'ALWAYS':常显	string		❌
anchorX	横向偏移量，向右为正数	number		❌
anchorY	纵向偏移量，向下为正数	number		❌

使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。

<map><cover-view slot="callout"><cover-view marker-id="1"></cover-view><cover-view marker-id="2"></cover-view><cover-view marker-id="3"></cover-view></cover-view></map>

# marker 上的气泡 label

属性	说明	类型	备注	支持度
content	文本	string		✅
color	文本颜色	string		❌
fontSize	文字大小	number		❌
anchorX	label的坐标，原点是 marker 对应的经纬度	number		❌
anchorY	label的坐标，原点是 marker 对应的经纬度	number		❌
borderWidth	边框宽度	number		❌
borderColor	边框颜色	string		❌
borderRadius	边框圆角	number		❌
bgColor	背景色	string		❌
padding	文本边缘留白	number		❌
textAlign	文本对齐方式。有效值: left, right, center	string		❌

# polyline

属性	说明	类型	必填	备注	支持度
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]	✅
color	线的颜色	string	否	十六进制	✅
colorList	彩虹线	array	否	存在时忽略 color 值	❌
width	线的宽度	number	否		✅
dottedLine	是否虚线	boolean	否	默认 false	❌
arrowLine	带箭头的线	boolean	否	默认 false	❌
arrowIconPath	更换箭头图标	string	否	在 arrowLine 为 true 时生效	❌
borderColor	线的边框颜色	string	否		❌
borderWidth	线的厚度	number	否		❌
level	压盖关系	string	否	默认为 abovelabels	❌

# polygon

属性	说明	类型	必填	备注	支持度
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]	✅
strokeWidth	描边的宽度	number	否		✅
strokeColor	描边的颜色	string	否	十六进制	✅
fillColor	填充颜色	string	否	十六进制	✅
zIndex	设置多边形Z轴数值	number	否		✅
level	压盖关系	string	否	默认为 abovelabels	❌

# circle

属性	说明	类型	必填	备注	其他
latitude	纬度	number	是	浮点数，范围 -90 ~ 90	✅
longitude	经度	number	是	浮点数，范围 -180 ~ 180	✅
color	描边的颜色	string	否	十六进制	✅
fillColor	填充颜色	string	否	十六进制	✅
radius	半径	number	是		✅
strokeWidth	描边的宽度	number	否		✅
level	压盖关系	string	否	默认为 abovelabels	❌

# control

属性	说明	类型	必填	备注	支持度
id	控件id	number	否	在控件点击事件回调会返回此id	❌
position	控件在地图的位置	object	是	控件相对地图位置	❌
iconPath	显示的图标	string	是	项目目录下的图片路径，支持本地路径、代码包路径	❌
clickable	是否可点击	boolean	否	默认不可点击	❌

# position

属性	说明	类型	必填	备注	支持度
left	距离地图的左边界多远	number	否	默认为0	❌
top	距离地图的上边界多远	number	否	默认为0	❌
width	控件宽度	number	否	默认为0	❌
height	控件高度	number	否	默认为0	❌

# 高德地图


高德地图最多允许有10个map对象

当超过10个map地图对象时，地图内容会显示黑屏。所以，当使用高德地图来实现map组件(即依赖高德地图扩展SDK)时，需要小程序在页面的onHide()里移除销毁map，然后在onShow()里创建地图和添加地图内容。

属性	类型	默认值	必填	说明	支持度
longitude	number	116.46	是	中心经度	iOS:✅ Android:✅ IDE:✅
latitude	number	39.92	是	中心纬度	iOS:✅ Android:✅ IDE:✅
scale	number	16	否	缩放级别，取值范围为3-20	iOS:✅ Android:✅ IDE:✅
min-scale	number	3	否	最小缩放级别	iOS:✅ Android:✅ IDE:✅ 不支持动态修改
max-scale	number	20	否	最大缩放级别	iOS:✅ Android:✅ IDE:✅ 不支持动态修改
markers	Array.marker		否	标记点	iOS:✅ Android:✅ IDE:✅
polyline	Array.polyline		否	路线	iOS:✅ Android:✅ IDE:✅
circles	Array.circle		否	圆	iOS:✅ Android:✅ IDE:✅
controls	Array.control		否	控件（即将废弃，建议使用 cover-view 代替）	iOS:❌ Android:❌ IDE:✅
include-points	Array.point		否	缩放视野以包含所有给定的坐标点	iOS:✅ Android:✅ IDE:❌
show-location	boolean	false	否	显示带有方向的当前定位点	iOS:✅ Android:✅ IDE:❌
polygons	Array.polygon		否	多边形	iOS:✅ Android:✅ IDE:✅
subkey	-		否	个性化地图暂不支持	iOS:❌ Android:❌ IDE:❌
layer-style	-		否	个性化地图暂不支持	iOS:❌ Android:❌ IDE:❌
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角	iOS:✅ Android:✅ IDE:✅
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角	iOS:✅ Android:✅ IDE:✅
enable-3D	boolean	false	否	展示3D楼块	iOS:❌ Android:❌ IDE:❌
show-compass	boolean	false	否	显示指南针	iOS:✅ Android:✅ IDE:❌
show-scale	boolean	false	否	显示比例尺	iOS:✅ Android:✅ IDE:✅
enable-overlooking	boolean	false	否	开启俯视	iOS:✅ Android:✅ IDE:❌
enable-zoom	boolean	true	否	是否支持缩放	iOS:✅ Android:✅ IDE:✅
enable-scroll	boolean	true	否	是否支持拖动	iOS:✅ Android:✅ IDE:✅
enable-rotate	boolean	false	否	是否支持旋转	iOS:✅ Android:✅ IDE:✅
enable-satellite	boolean	false	否	是否开启卫星图	iOS:✅ Android:✅ IDE:✅
enable-traffic	boolean	false	否	是否开启实时路况	iOS:✅ Android:✅ IDE:✅
enable-poi	boolean	true	否	是否展示 POI 点（iOS默认开启，不支持关闭）	iOS:✅ Android:✅ IDE:✅
enable-building	boolean		否	是否展示建筑物	iOS:✅ Android:✅ IDE:✅
setting	object		否	配置项 setting内容与属性配置冲突时，以setting的为准	iOS:✅ Android:✅ IDE:✅
bindtap	eventhandle		否	点击地图时触发，返回经纬度信息	iOS:✅ Android:✅ IDE:✅
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}	iOS:✅ Android:✅ IDE:✅
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}	iOS:❌ Android:❌ IDE:❌
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}	iOS:❌ Android:❌ IDE:✅
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}	iOS:✅ Android:✅ IDE:❌
bindupdated	eventhandle		否	在地图渲染更新完成时触发	iOS:✅ 仅在地图加载完成时触发 Android:✅ 仅在地图加载完成时触发 IDE:❌
bindregionchange	eventhandle		否	视野发生变化时触发	iOS:✅ Android:✅ IDE:✅
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}	iOS:✅ Android:✅ IDE:❌
bindanchorpointtap	eventhandle		否	点击定位标时触发，e.detail = {longitude, latitude}	iOS:✅ Android:✅ IDE:❌

# marker

属性	说明	类型	必填	备注	支持度
id	标记点 id	number	否	marker 点击事件回调会返回此 id。	iOS:✅ Android:✅ IDE:✅
clusterId	聚合簇的 id	number	否	自定义点聚合簇效果时使用	iOS:❌ Android:✅ IDE:❌
joinCluster	是否参与点聚合	Boolean	否	默认不参与点聚合	iOS:❌ Android:✅ IDE:❌
latitude	纬度	number	是	浮点数，范围 -90 ~ 90	iOS:✅ Android:✅ IDE:✅
longitude	经度	number	是	浮点数，范围 -180 ~ 180	iOS:✅ Android:✅ IDE:✅
title	标注点名	string	否	点击时显示，callout存在时将被忽略	iOS:✅ Android:✅ IDE:✅
zIndex	显示层级	number	否		iOS:✅Android:✅ IDE:✅
iconPath	显示的图标	string	是	项目目录下的图片路径，支持网络路径、本地路径、代码包路径	iOS:✅ Android:✅ IDE:✅
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0	iOS:❌ Android:✅ IDE:✅
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1	iOS:❌ Android:✅ IDE:✅
width	标注图标宽度	number/string	否	默认为图片实际宽度	iOS:✅ Android:✅ IDE:✅
height	标记点	number	否	默认为图片实际高度	iOS:✅ Android:✅ IDE:✅
callout	标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	iOS:✅ Android:✅ IDE:✅
customCallout	标记点	number	否		iOS:✅ Android:✅ IDE:❌
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	iOS:❌ Android:❌ IDE:✅
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	iOS:❌ Android:✅ IDE:✅
aria-label	无障碍访问，（属性）元素的额外描述	string	否		iOS:❌ Android:❌ IDE:❌
displayWithCallout	是否将 callout/customCallout/title 作为 marker 图标展示	Boolean	否	将 callout/customCallout/title 作为 marker 图标展示，使得 callout/customCallout/title 可以常显	iOS:✅ Android:✅ IDE:❌

# marker 上的气泡 callout

属性	说明	类型	备注	支持度
content	文本	string		iOS:✅ Android:✅ IDE:✅
color	文本颜色	string		iOS:✅ Android:✅ IDE:❌
fontSize	文字大小	number		iOS:✅ Android:✅ IDE:❌
borderRadius	边框圆角	number		iOS:✅ Android:✅ IDE:✅
borderWidth	边框宽度	string		iOS:✅ Android:✅ IDE:❌
borderColor	边框颜色	string		iOS:✅ Android:✅ IDE:❌
bgColor	背景色	string		iOS:✅ Android:✅ IDE:❌
padding	文本边缘留白	number		iOS:❌ Android:✅ IDE:❌
display	'BYCLICK':点击显示; 'ALWAYS':常显	string		iOS:❌ Android:❌ IDE:❌
textAlign	文本对齐方式。有效值: left, right, center	string		iOS:✅ Android:✅ IDE:❌
anchorX	横向偏移量，向右为正数	number		iOS:✅ Android:✅ IDE:❌
anchorY	纵向偏移量，向下为正数	number		iOS:✅ Android:✅ IDE:❌

# marker 上的气泡 customCallout

customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

属性	说明	类型	备注	支持度
display	'BYCLICK':点击显示; 'ALWAYS':常显	string		iOS:❌ Android:❌ IDE:❌
anchorX	横向偏移量，向右为正数	number		iOS:✅ Android:✅ IDE:❌
anchorY	纵向偏移量，向下为正数	number		iOS:✅ Android:✅ IDE:❌

使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。

<map><cover-view slot="callout"><cover-view marker-id="1"></cover-view><cover-view marker-id="2"></cover-view><cover-view marker-id="3"></cover-view></cover-view></map>

# marker 上的气泡 label

属性	说明	类型	备注	支持度
content	文本	string		iOS:❌ Android:❌ IDE:✅
color	文本颜色	string		iOS:❌ Android:❌ IDE:❌
fontSize	文字大小	number		iOS:❌ Android:❌ IDE:❌
anchorX	label的坐标，原点是 marker 对应的经纬度	number		iOS:❌ Android:❌ IDE:❌
anchorY	label的坐标，原点是 marker 对应的经纬度	number		iOS:❌ Android:❌ IDE:❌
borderWidth	边框宽度	number		iOS:❌ Android:❌ IDE:❌
borderColor	边框颜色	string		iOS:❌ Android:❌ IDE:❌
borderRadius	边框圆角	number		iOS:❌ Android:❌ IDE:❌
bgColor	背景色	string		iOS:❌ Android:❌ IDE:❌
padding	文本边缘留白	number		iOS:❌ Android:❌ IDE:❌
textAlign	文本对齐方式。有效值: left, right, center	string		iOS:❌ Android:❌ IDE:❌

# polyline

属性	说明	类型	必填	备注	支持度
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]	iOS:✅ Android:✅ IDE:✅
color	线的颜色	string	否	十六进制	iOS:✅ Android:✅ IDE:✅
colorList	彩虹线	array	否	存在时忽略 color 值	iOS:❌ Android:✅ IDE:❌
width	线的宽度	number	否		iOS:✅ Android:✅ IDE:✅
dottedLine	是否虚线	boolean	否	默认 false	iOS:❌ Android:✅ IDE:✅
arrowLine	带箭头的线	boolean	否	默认 false	iOS:❌ Android:✅ IDE:✅
arrowIconPath	更换箭头图标	string	否	在 arrowLine 为 true 时生效	iOS:✅ Android:✅ IDE:✅
borderColor	线的边框颜色	string	否		iOS:❌ Android:❌ IDE:✅
borderWidth	线的厚度	number	否		iOS:❌ Android:❌ IDE:✅
level	压盖关系	string	否	默认为 abovelabels	iOS:❌ Android:✅ aboveroads等效于abovebuildings IDE:✅

# polygon

属性	说明	类型	必填	备注	支持度
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]	iOS:✅ Android:✅ IDE:✅
strokeWidth	描边的宽度	number	否		iOS:✅ Android:✅ IDE:✅
strokeColor	描边的颜色	string	否	十六进制	iOS:✅ Android:✅ IDE:✅
fillColor	填充颜色	string	否	十六进制	iOS:✅ Android:✅ IDE:✅
zIndex	设置多边形Z轴数值	number	否		iOS:✅ Android:✅ IDE:✅
level	压盖关系	string	否	默认为 abovelabels	iOS:❌ Android:✅ aboveroads等效于abovebuildings IDE:✅

# circle

属性	说明	类型	必填	备注	支持度
latitude	纬度	number	是	浮点数，范围 -90 ~ 90	iOS:✅ Android:✅ IDE:✅
longitude	经度	number	是	浮点数，范围 -180 ~ 180	iOS:✅ Android:✅ IDE:✅
color	描边的颜色	string	否	十六进制	iOS:✅ Android:✅ IDE:✅
fillColor	填充颜色	string	否	十六进制	iOS:✅ Android:✅ IDE:✅
radius	半径	number	是		iOS:✅ Android:✅ IDE:✅
strokeWidth	描边的宽度	number	否		iOS:✅ Android:✅ IDE:✅
level	压盖关系	string	…(内容过长已截断)

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