本节主要讲述小程序组件map标签的用法及其属性。
组件用法：
wxml
- <view>
- <map longitude="112.61" latitude="26.89" markers="{{markers}}" covers="{{covers}}"></map>
- </view>
js
- Page({
- data:{
- markers: [{
- latitude: 26.89,
- longitude: 112.61,
- scale: 24,
- name: '微信小程序社区',
- desc: '我在这里'
- }],
- covers: [{
- latitude: 26.89,
- longitude: 112.61,
- iconPath: '../images/car.png',
- rotate: 10
- }]
- }
- })
wxss
- map {
- width: 700rpx;
- height: 600rpx;
- margin: 0 auto;
- }
主要属性：map标签
|
属性名称
|
数据类型
|
描述
|
默认值
|
必填
|
| longitude | Number | 标签中心经度 | 是 | |
| latitude | Number | 标签中心纬度 | 是 | |
| scale | Number | 缩放比例 | 16 | 否 |
| markers | Array | 标记点 | 是 | |
| covers | Array | 覆盖物 | 是 |
markers属性
|
属性值
|
数据类型
|
描述
|
必填
|
备注
|
| longitude | Number | 标记点经度 | 是 | 浮点数，范围 -90 ~ 90 |
| latitude | Number | 标记点纬度 | 是 | 浮点数，范围 -180 ~ 180 |
| name | String | 标记点名称 | 是 | |
| desc | String | 标记点描述 | 否 |
covers属性
|
属性值
|
数据类型
|
描述
|
必填
|
备注
|
| longitude | Number | 经度 | 是 | 浮点数，范围 -90 ~ 90 |
| latitude | Number | 纬度 | 是 | 浮点数，范围 -180 ~ 180 |
| iconPath | String | 覆盖物图标 | 是 | 项目目录下的图片路径，支持相对路径写法 |
| rotate | String | 旋转角度 | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 |
注：
- 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。标记点markers只能在初始化的时候设置，不支持动态更新；
- 请勿在 <scroll-view/> 中使用map标签；
- 标记点用于在地图上显示标记的位置，不能自定义图标和样式；
- 覆盖物用于在地图上显示自定义图标，可自定义图标和样式。
