登陆可实现PC、移动端同步进度.
微信小程序map
地图。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
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 | 点击地图时触发 |
markers
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
id | 标记点id | Number | 否 | marker点击事件回调会返回此id | |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | String | 否 | ||
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 | |
rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
alpha | 标注的透明度 | Number | 否 | 默认1,无透明 | |
width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | |
height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | {content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display} | 1.2.0 |
label | 为标记点旁边增加标签 | Object | 否 | {color, fontSize, content, x, y},可识别换行符,x,y原点是marker对应的经纬度 | 1.2.0 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | 1.2.0 |
marker 上的气泡 callout
属性 | 说明 | 类型 |
---|---|---|
content | 文本 | String |
color | 文本颜色 | String |
fontSize | 文字大小 | Number |
borderRadius | callout边框圆角 | Number |
bgColor | 背景色 | String |
padding | 文本边缘留白 | Number |
display | 'BYCLICK':点击显示; 'ALWAYS':常显 | String |
polyline
指定一系列坐标点,从数组第一项连线至最后一项
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
points | 经纬度数组 | Array | 是 | [{latitude: 0, longitude: 0}] | |
color | 线的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA | |
width | 线的宽度 | Number | 否 | ||
dottedLine | 是否虚线 | Boolean | 否 | 默认false | |
arrowLine | 带箭头的线 | Boolean | 否 | 默认false,开发者工具暂不支持该属性 | 1.2.0 |
borderColor | 线的边框颜色 | String | 否 | 1.2.0 | |
borderWidth | 线的厚度 | Number | 否 | 1.2.0 |
circles
在地图上显示圆
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 |
color | 描边的颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
fillColor | 填充颜色 | String | 否 | 8位十六进制表示,后两位表示alpha值,如:#000000AA |
radius | 半径 | Number | 是 | |
strokeWidth | 描边的宽度 | Number | 否 |
controls
在地图上显示控件,控件不随着地图移动
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件id | Number | 否 | 在控件点击事件回调会返回此id |
position | 控件在地图的位置 | Object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 |
clickable | 是否可点击 | Boolean | 否 | 默认不可点击 |
position
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
left | 距离地图的左边界多远 | Number | 否 | 默认为0 |
top | 距离地图的上边界多远 | Number | 否 | 默认为0 |
width | 控件宽度 | Number | 否 | 默认为图片宽度 |
height | 控件高度 | Number | 否 | 默认为图片高度 |
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
示例:
<!-- 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)
}
})
Bug & Tip
tip
:map
组件是由客户端创建的原生组件,它的层级是最高的。tip
: 请勿在scroll-view
中使用map
组件。tip
:css
动画对map
组件无效。tip
:map
组件使用的经纬度是火星坐标系,调用wx.getLocation
接口需要指定type
为gcj02
- 还没有人评论,欢迎说说您的想法!