地图组件。
地图组件用于展示地图,而定位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 否 默认为图片高度