地图。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| longitude | Number | 中心经度 | ||
| latitude | Number | 中心纬度 | ||
| scale | Number | 16 | 缩放级别，取值范围为5-18 | |
| markers | Array | 标记点 | ||
| covers | Array | 即将移除，请使用 markers | ||
| polyline | Array | 路线 | ||
| circles | Array | 圆 | ||
| controls | Array | 控件 | ||
| include-points | Array | 缩放视野以包含所有给定的坐标点 | ||
| show-location | Boolean | 显示带有方向的当前定位点 | ||
| bindmarkertap | EventHandle | 点击标记点时触发 | ||
| bindcallouttap | EventHandle | 点击标记点对应的气泡时触发 | 1.2.0 | |
| bindcontroltap | EventHandle | 点击控件时触发 | ||
| bindregionchange | EventHandle | 视野发生变化时触发 | ||
| bindtap | EventHandle | 点击地图时触发 |
标记点用于在地图上显示标记的位置
marker 上的气泡 callout
polyline
circles
controls
position
示例：
<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>// map.js
Page({
data: {
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/resources/location.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
},
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log(e.markerId)
},
controltap(e) {
console.log(e.controlId)
}
})
tip:map组件是由客户端创建的原生组件，它的层级是最高的。tip: 请勿在scroll-view中使用map组件。tip:css动画对map组件无效。tip:map组件使用的经纬度是火星坐标系，调用wx.getLocation接口需要指定type为gcj02