微信小程序开发——地图

地图

  • map

map

属性名 类型 默认值 说明 最低版本
longitude Number   中心经度  
latitude Number   中心纬度  
scale Number 16 缩放级别,取值范围为5-18  
markers Array   标记点  
covers Array   即将移除,请使用 markers  
polyline Array   路线  
polygons Array   多边形 2.3.0
circles Array    
controls Array   控件(即将废弃,建议使用 cover-view 代替)  
include-points Array   缩放视野以包含所有给定的坐标点  
show-location Boolean   显示带有方向的当前定位点  
subkey String '' 个性化地图使用的key,仅初始化地图时有效 2.3.0
enable-3D Boolean false 展示3D楼块(工具暂不支持) 2.3.0
show-compass Boolean false 显示指南针 2.3.0
enable-overlooking Boolean false 开启俯视 2.3.0
enable-zoom Boolean true 是否支持缩放 2.3.0
enable-scroll Boolean true 是否支持拖动 2.3.0
enable-rotate Boolean false 是否支持旋转 2.3.0
bindmarkertap EventHandle   点击标记点时触发,会返回marker的id  
bindcallouttap EventHandle   点击标记点对应的气泡时触发,会返回marker的id 1.2.0
bindcontroltap EventHandle   点击控件时触发,会返回control的id  
bindregionchange EventHandle   视野发生变化时触发 2.3.0起增加causedBy 参数区分拖动、缩放和调用接口等来源
bindtap EventHandle   点击地图时触发  
bindupdated EventHandle   在地图渲染更新完成时触发 1.6.0
bindpoitap EventHandle   点击地图poi点时触发 2.3.0

注意: covers 属性即将移除,请使用 markers 替代

markers

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

属性 说明 类型 必填 备注 最低版本
id 标记点id Number marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。  
latitude 纬度 Number 浮点数,范围 -90 ~ 90  
longitude 经度 Number 浮点数,范围 -180 ~ 180  
title 标注点名 String    
zIndex 显示层级 Number   2.3.0
iconPath 显示的图标 String 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径和网络图片(2.3.0)  
rotate 旋转角度 Number 顺时针旋转的角度,范围 0 ~ 360,默认为 0  
alpha 标注的透明度 Number 默认1,无透明,范围 0 ~ 1  
width 标注图标宽度 Number / String 默认为图片实际宽度,单位px(2.4.0起支持rpx)  
height 标注图标高度 Number / String 默认为图片实际高度,单位px(2.4.0起支持rpx)  
callout 自定义标记点上方的气泡窗口 Object 支持的属性见下表,可识别换行符。 1.2.0
label 为标记点旁边增加标签 Object 支持的属性见下表,可识别换行符。 1.2.0
anchor 经纬度在标注图标的锚点,默认底边中点 Object {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 1.2.0
aria-label 无障碍访问,(属性)元素的额外描述 String   2.5.0

marker 上的气泡 callout

属性 说明 类型 最低版本
content 文本 String 1.2.0
color 文本颜色 String 1.2.0
fontSize 文字大小 Number / String 1.2.0
borderRadius 边框圆角 Number / String 1.2.0
borderWidth 边框宽度 Number / String 2.3.0
borderColor 边框颜色 String 2.3.0
bgColor 背景色 String 1.2.0
padding 文本边缘留白 Number / String 1.2.0
display 'BYCLICK':点击显示; 'ALWAYS':常显 String 1.2.0
textAlign 文本对齐方式。有效值: left, right, center String 1.6.0

marker 上的气泡 label

属性 说明 类型 最低版本
content 文本 String 1.2.0
color 文本颜色 String 1.2.0
fontSize 文字大小 Number / String 1.2.0
x label的坐标(废弃) Number 1.2.0
y label的坐标(废弃) Number 1.2.0
anchorX label的坐标,原点是 marker 对应的经纬度 Number / String 2.1.0
anchorY label的坐标,原点是 marker 对应的经纬度 Number / String 2.1.0
borderWidth 边框宽度 Number / String 1.6.0
borderColor 边框颜色 String 1.6.0
borderRadius 边框圆角 Number / String 1.6.0
bgColor 背景色 String 1.6.0
padding 文本边缘留白 Number / String 1.6.0
textAlign 文本对齐方式。有效值: left, right, center String 1.6.0

polyline

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

属性 说明 类型 必填 备注 最低版本
points 经纬度数组 Array [{latitude: 0, longitude: 0}]  
color 线的颜色 String 十六进制  
width 线的宽度 Number    
dottedLine 是否虚线 Boolean 默认false  
arrowLine 带箭头的线 Boolean 默认false,开发者工具暂不支持该属性 1.2.0
arrowIconPath 更换箭头图标 String 在arrowLine为true时生效 1.6.0
borderColor 线的边框颜色 String   1.2.0
borderWidth 线的厚度 Number   1.2.0

polygons

指定一系列坐标点,根据 points 坐标数据生成闭合多边形,最低版本2.3.0

属性 说明 类型 必填 备注 最低版本
points 经纬度数组 Array [{latitude: 0, longitude: 0}]  
strokeWidth 描边的宽度 Number    
strokeColor 描边的颜色 String 十六进制  
fillColor 填充颜色 String 十六进制  
zIndex 设置多边形Z轴数值 Number    

circles

在地图上显示圆

属性 说明 类型 必填 备注
latitude 纬度 Number 浮点数,范围 -90 ~ 90
longitude 经度 Number 浮点数,范围 -180 ~ 180
color 描边的颜色 String 十六进制
fillColor 填充颜色 String 十六进制
radius 半径 Number  
strokeWidth 描边的宽度 Number  

controls

在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

 

cover-view

覆盖在原生组件之上的文本视图,可覆盖的原生组件包括mapvideocanvascameralive-playerlive-pusher,只支持嵌套cover-viewcover-image,可在cover-view中使用button

属性名 类型 默认值 说明 最低版本
scroll-top Number / String   设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效(单位px,2.4.0起支持rpx) 2.1.0
aria-role String   无障碍访问,(角色)标识元素的作用 2.5.0
aria-label String   无障碍访问,(属性)元素的额外描述 2.5.0

 

position

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

 

你可能感兴趣的:(微信小程序开发——地图)