map
地图。该组件是原生组件，使用时请注意相关限制。 个性化地图能力可在小程序后台“设置-开发者工具-腾讯位置服务”申请开通。 设置subkey后，小程序内的地图组件均会使用该底图效果，底图场景的切换会在后续版本提供。 详见《小程序个性地图使用指南》
效果展示
map属性
注：
covers属性即将移除，请使用markers替代
markers
标记点用于在地图上显示标记的位置
marker 上的气泡 callout
marker 上的气泡 label
polyline
指定一系列坐标点，从数组第一项连线至最后一项
polygons
指定一系列坐标点，根据 points 坐标数据生成闭合多边形，最低版本2.3.0
circles
在地图上显示圆
controls
在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view
position
注意
- 个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
- 地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA
例如：
效果展示
代码
index.wxml
<!-- map属性
longitude 中心经度
latitude 中心纬度
scale:16 缩放级别，取值范围为5-18
markers Array 标记点
covers Array 即将移除，请使用 markers
polyline Array 路线
polygons Array 多边形
circles Array 圆
controls Array 控件（即将废弃，建议使用 cover-view 代替）
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
subkey '' 个性化地图使用的key，仅初始化地图时有效
enable-3D:false 展示3D楼块(工具暂不支持）
show-compass:false 显示指南针
enable-overlooking:false 开启俯视
enable-zoom:true 是否支持缩放
enable-scroll:true 是否支持拖动
enable-rotate:false 是否支持旋转
bindmarkertap 点击标记点时触发，会返回marker的id
bindcallouttap 点击标记点对应的气泡时触发，会返回marker的id
bindcontroltap 点击控件时触发，会返回control的id
bindregionchange 视野发生变化时触发 2.3.0起增加causedBy 参数区分拖动、缩放和调用接口等来源
bindtap EventHandle 点击地图时触发
bindupdated EventHandle 在地图渲染更新完成时触发
bindpoitap EventHandle 点击地图poi点时触发
-->
<view class="contentView">
<view class="mapView">
<map
id="myMap"
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
scale="{{scale}}"
markers="{{markers}}"
covers="{{covers}}"
show-location
></map>
</view>
<button bindtap="getCenterLocation" type="primary">{{location}}</button>
<button bindtap="translateMarker" type="primary">移动标注</button>
<button bindtap="moveToLocation" type="primary">移动位置</button>
<button bindtap="scaleClick" type="primary">缩放地图</button>
<button bindtap="includePoints" type="primary">缩放视野展示所有经纬度</button>
</view>
index.wxss
.contentView{
width: 100%
}
.mapView{
box-sizing: border-box;
padding:30rpx,30rpx,0,30rpx;
}
button{
margin: 20rpx;
}
index.js
/*(1)markers属性 标记点用于在地图上显示标记的位置
id 标记点id marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
latitude 纬度 浮点数，范围 -90 ~ 90
longitude 经度 浮点数，范围 -180 ~ 180
title 标注点名
zIndex 显示层级
iconPath 显示的图标 项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径和网络图片（2.3.0）
rotate 旋转角度 顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha 标注的透明度 默认1，无透明，范围 0 ~ 1
width 标注图标宽度 默认为图片实际宽度，单位px（2.4.0起支持rpx）
height 标注图标高度 默认为图片实际高度，单位px（2.4.0起支持rpx）
callout 自定义标记点上方的气泡窗口 支持的属性见下表，可识别换行符。
label 为标记点旁边增加标签 支持的属性见下表，可识别换行符。
anchor 经纬度在标注图标的锚点，默认底边中点 {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
aria-label 无障碍访问，（属性）元素的额外描述
*/
/*(2)marker 上的气泡 callout
content 文本
color 文本颜色
fontSize 文字大小
borderRadius 边框圆角
borderWidth 边框宽度
borderColor 边框颜色
bgColor 背景色
padding 文本边缘留白
display 'BYCLICK':点击显示; 'ALWAYS':常显
textAlign 文本对齐方式。有效值: left, right, center
*/
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
scale: 16,
location:"获取位置",
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
title: '微信总部',
}, {
id: 2,
latitude: 23.099220,
longitude: 113.321520,
iconPath: '/image/location.png',
callout: {
content: '自定义点',
color:'#AD1212',
bgColor:'#00AD00',
fontSize: '20',
borderRadius:'5'
}
}],
},
//初始化地图
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
},
//获取位置
getCenterLocation: function () {
var that = this
that.mapCtx.getCenterLocation({
success: function (res) {
console.log('经度',res.longitude)
console.log('纬度',res.latitude)
that.setData({
location: '经度:' + res.longitude + '纬度:'+res.latitude
})
}
})
},
scaleClick: function () {
this.setData({
scale: 10,
})
},
// 移动位置
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
// 移动标注
translateMarker: function () {
this.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 1000,
destination: {
latitude: 23.10229,
longitude: 113.3345211,
},
animationEnd() {
console.log('动画结束')
}
})
},
//缩放视野展示所有经纬度
includePoints: function () {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude: 23.10229,
longitude: 113.3345211,
}, {
latitude: 23.00229,
longitude: 113.3345211,
}]
})
}
})