map地图组件

程序员哆啦A梦

地图组件。

地图组件用于展示地图,而定位API只是获取坐标,请勿混淆两者。

longitude Number 中心经度
latitude Number 中心纬度

scale Number 16 缩放级别,取值范围为3-20

min-scale Number 3 最小缩放级别

max-scale Number 20 最大缩放级别

layer-style Number 1 个性化地图

markers Array 标记点

polyline Array 路线

circles Array 圆

controls Array 控件

include-points Array 缩放视野以包含所有给定的坐标点

@markertap EventHandle 点击标记点时触发,e.detail = {markerId}

@labeltap EventHandle 点击label时触发,e.detail = {markerId}

@callouttap EventHandle 点击标记点对应的气泡时触发,e.detail = {markerId}

@controltap EventHandle 点击控件时触发,e.detail = {controlId}

@regionchange EventHandle 视野发生变化时触发

@tap EventHandle 点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度

@updated EventHandle 在地图渲染更新完成时触发

@anchorpointtap EventHandle 点击定位标时触发,e.detail = {longitude, latitude}

@poitap EventHandle 点击地图poi点时触发,e.detail = {name, longitude, latitude}

注意

<map> 组件的宽/高推荐写直接量,比如:750rpx,不要设置百分比值。
uni-app 只支持 gcj02 坐标
App平台 layer-style 属性需要在地图服务商后台创建,值设置为高德后台申请的字符串

markers

标记点用于在地图上显示标记的位置

id    标记点id    Number    是    marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数

id    标记点id    Number    是    marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数

latitude    纬度    Number    是    浮点数,范围 -90 ~ 90

longitude    经度    Number    是    浮点数,范围 -180 ~ 180

title    标注点名    String    否    点击时显示,callout存在时将被忽略

iconPath    显示的图标    String    是    项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径

rotate    旋转角度    Number    否    顺时针旋转的角度,范围 0 ~ 360,默认为 0

alpha    标注的透明度    Number    否    默认1,无透明,范围 0 ~ 1

width    标注图标宽度    Number    否    默认为图片实际宽度

height    标注图标高度    Number    否    默认为图片实际高度

callout    自定义标记点上方的气泡窗口    Object    否    支持的属性见下表,可识别换行符。

label    为标记点旁边增加标签    Object    否    支持的属性见下表,可识别换行符。

anchor    经纬度在标注图标的锚点,默认底边中点    Object    否    {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

clusterId    自定义点聚合簇效果时使用    Number    否

customCallout    自定义气泡窗口    Object    否    

aria-label    无障碍访问,(属性)元素的额外描述

marker 上的气泡 callout

content    文本    String    
color    文本颜色    String    App-nvue 2.1.5+、微信小程序、H5、百度小程序
fontSize    文字大小    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
borderRadius    callout边框圆角    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
bgColor    背景色    String    App-nvue 2.1.5+、微信小程序、H5、百度小程序
padding    文本边缘留白    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
display    'BYCLICK':点击显示; 'ALWAYS':常显    String    App-nvue 2.1.5+、微信小程序、H5、百度小程序
textAlign    文本对齐方式。有效值: left, right, center

marker 上的标签 label

content    文本    String    
color    文本颜色    String    App-nvue 2.1.5+、微信小程序、H5、百度小程序
fontSize    文字大小    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
x    label的坐标,原点是 marker 对应的经纬度    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
y    label的坐标,原点是 marker 对应的经纬度    Number    App-nvue 2.1.5+、微信小程序、H5、百度小程序
borderWidth    边框宽度    Number    微信小程序、百度小程序
borderColor    边框颜色    String    微信小程序、百度小程序
borderRadius    边框圆角    Number    App-nvue 2.1.5+、微信小程序、百度小程序
bgColor    背景色    String    App-nvue 2.1.5+、微信小程序、百度小程序
padding    文本边缘留白    Number    App-nvue 2.1.5+、微信小程序、百度小程序
textAlign    文本对齐方式。有效值: left, right, center    String    App-nvue 2.1.5+、微信小程序、百度小程序
clusterId    自定义点聚合簇效果时使用    Number    App-nvue 3.1.0+、微信小程序
customCallout    自定义气泡窗口    Object    App暂时不支持、微信小程序
aria-label    无障碍访问,(属性)元素的额外描述

polyline

指定一系列坐标点,从数组第一项连线至最后一项

points    经纬度数组    Array    是    [{latitude: 0, longitude: 0}]    
color    线的颜色    String    否    8位十六进制表示,后两位表示alpha值,如:#0000AA    
width    线的宽度    Number    否        
dottedLine    是否虚线    Boolean    否    默认false    App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序
arrowLine    带箭头的线    Boolean    否    默认false,微信小程序开发者工具暂不支持该属性    App-nvue 2.1.5+、微信小程序、百度小程序
arrowIconPath    更换箭头图标    String    否    在arrowLine为true时生效    App-nvue 2.1.5+、微信小程序、百度小程序
borderColor    线的边框颜色    String    否        App-nvue 2.1.5+、微信小程序、H5、百度小程序
borderWidth    线的厚度    Number    否        App-nvue 2.1.5+、微信小程序、H5、百度小程序
colorList    彩虹线    Array    false    存在时忽略 color 值    App-nvue 3.1.0+、微信小程序
level    压盖关系,默认为 abovelabels    String    false

polygon
指定一系列坐标点,根据 points 坐标数据生成闭合多边形

points    经纬度数组    array    是    [{latitude: 0, longitude: 0}]
strokeWidth    描边的宽度    Number    否    
strokeColor    描边的颜色    String    否    十六进制
fillColor    填充颜色    String    否    十六进制
zIndex    设置多边形 Z 轴数值    Number    否    
level    压盖关系,默认为 abovelabels    String    false    App不支持(需SDK提供支持)、微信小程序

circles

在地图上显示圆

atitude    纬度    Number    是    浮点数,范围 -90 ~ 90
longitude    经度    Number    是    浮点数,范围 -180 ~ 180
color    描边的颜色    String    否    8位十六进制表示,后两位表示alpha值,如:#0000AA
fillColor    填充颜色    String    否    8位十六进制表示,后两位表示alpha值,如:#0000AA
radius    半径    Number    是    
strokeWidth    描边的宽度    Number    否     
level    压盖关系,默认为 abovelabels    String    false    App不支持(需SDK提供支持)、微信小程序

controls

在地图上显示控件,控件不随着地图移动

id    控件id    Number    否    在控件点击事件回调会返回此id
position    控件在地图的位置    Object    是    控件相对地图位置
iconPath    显示的图标    String    是    项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对项目根目录;也支持临时路径
clickable    是否可点击    Boolean    否    默认不可点击

position

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