微信小程序地图的使用
本文使用原生微信小程序技术，仅提供参考，如目前使用的不是微信小程序原生技术需要做相关调整
作者技术水平有限，如有不足之处还请指出（保命用）
一、map组件的介绍
map是微信小程序的一个基本组件，可以直接使用，在默认情况下模拟器会展示北京的地图，手机展示非洲那边的地图（就是经纬度都是0的位置）使用如下：
<map></map>
效果图：
map组件也是有默认高度和宽度的 默认的宽度是 300px 默认的高度 150px 如果想要修改样式可以给map组件添加类名修改样式
map组件同时也提供了很多的属性来给我们使用，本文只列举最基本的几个，具体的可以去看微信小程序的官方文档 map | 微信开放文档 (qq.com)
-
longitude 中心经度
- 地图map组件要展示的经度信息，必须是一个number类型的值，取值范围为 -180 ~ 180
-
latitude 中心纬度
- 地图map组件要展示的经度信息，也必须是一个number类型的值，取值范围为 -90 ~ 90
这时候我们可以给map组件赋值试试,就可以得到某个位置的地图
<map longitude="{{110.36663}}" latitude="{{20.02864}}" ></map>
到这里很多人就要问了，longitude和latitude怎么拿，总不能写死吧。 别急，接下来让我来告诉各位map组件的最基本的使用
二、map组件的属性的使用
地图嘛，不就是为了查看某个物体所处的位置吗，接下来让我来告诉各位位置的第一个api getLocation
2.1 getLocation的使用（经纬度属性值的获取）
使用getLocation之前必须要先配置好app.json,否则无法使用
-
配置permission权限
在app.json的配置对象里加入代码配置用户获取位置信息的权限 desc为要求用户授权时的提示说明
"permission": {
"scope.userLocation": {
"desc": "需要获取你当前的位置信息"
}
},
-
配置requiredPrivateInfos
该配置是为了配置api的使用权限，配置代码如下：
"requiredPrivateInfos":[
"getLocation",
]
注意位置的api往往有小程序类目的要求，类目不符合也是无法使用的（这里建议各位去小程序后台开通相关服务类目，然后去开发管理-->接口设置开通相关接口的使用权限，否则是不能上线的，只能在体验版使用），具体可以参考各个api的官方文档的说明wx.getLocation(Object object) | 微信开放文档 (qq.com)
接下来就可以使用getLocation获取当前位置了，在模拟器上只能获取到模糊的经纬度信息
//获取位置
wx.getLocation({
type: 'gcj02', //获取位置的类型 可选 gcj02和wgs84 默认wgs84
isHighAccuracy: true, //开启精准 默认不开启
success: (res) => {
console.log('位置信息', res)
const latitude = res.latitude //纬度
const longitude = res.longitude //经度
const speed = res.speed
const accuracy = res.accuracy
//存储位置信息
this.setData({
positionObj: {
latitude,
longitude,
speed,
accuracy
},
})
}
})
将得到的位置信息交给map组件的属性即可得到当前位置的地图效果
<map class="maps" longitude="{{positionObj.longitude}}" latitude="{{positionObj.latitude}}" ></map>
接下来我们给当前位置加个标识
2.2 map组件 标识属性markers的简单使用
markers 属性是为了给地图添加标识点的 是一个array类型的值，数组的每一项都是一个对象，包含很多属性，这里只挑几个重要的做介绍，具体可以查看官方文档map | 微信开放文档 (qq.com)
let markers = [{
iconPath: '../../static/地点.png', //表示点图片 建议使用.png格式
name: 'mymarkers',
id: 1,
latitude: latitude, // 经度 可以通过getLocation api获取
longitude: longitude, //纬度 可以通过getLocation api获取
width: 50, // 标识宽度
height: 50, // 标识高度
}]
//存储标识点
this.setData({
markers: markers
})
markers的每一项都是一个标识点，一个地图可以存在多个标识点
- iconPath
- 标识标识点图片 本地和网络的图片都可以
- latitude
- latitude 标识点所在经度
- longitude
- 标识点所在纬度
- width
- 标识点图片的宽度 可以是数字也可以是字符串。
验证：50 和 50px 是一样的效果
- 标识点图片的宽度 可以是数字也可以是字符串。
- height
- 标识点图片的高度
在获取好标识点后给map组件加上markers属性就可以看到标识点了
<map class="maps" longitude="{{positionObj.longitude}}" latitude="{{positionObj.latitude}}" markers="{{markers}}" ></map>
三、监听位置实时变化
虽然可以通过定时器来定时获取位置信息，但是getLocation是耗电量的，而且也有调用频率限制的
引用微信开放社区的说明：社区每周 |位置接口增加频率限制、服务商小程序新能力、新版众测及上周问题反馈（3.08-3.12） | 微信开放社区 (qq.com)
当前小程序频繁调用wx.getLocation接口会导致用户手机电量消耗较快，请开发者改为使用持续定位接口wx.onLocationChange，该接口会固定频率回调，使用效果与跟频繁调用getLocation一致。
从基础库2.17.0版本起（预计发布时间2021.4.9），将对getLocation接口增加频率限制，包括：
- 在开发版或体验版中，30秒内调用getLocation，仅第一次有效，剩余返回fail。
- 正式版中，为保证小程序正常运行同时不过度消耗用户电量，一定时间内（根据设备情况判断）调用getLocation，仅第一次会返回实时定位信息，剩余返回与第一次定位相同的信息。
未做好兼容调整可能会影响用户体验，请开发者尽快适配。
3.1 onLocationChange的使用
所以我们使用wx.onLocationChange 方法来监听位置的实时变化，onLocationChange的使用前提和getLocation类似，也是需要相应的类目和开通权限 （前文有说过），不然只能在体验版或开发版使用
onLocationChange 的使用要配合其他两个api之一一起 wx.startLocationUpdateBackground 或者wx.startLocationUpdate 这里我只使用startLocationUpdateBackground后台监听
使用前先配置一下app.json
"requiredBackgroundModes": ["location"],
"requiredPrivateInfos":[
"getLocation",
"startLocationUpdateBackground",
"onLocationChange"
]
requiredBackgroundModes 配置项 声明后台定位
requiredPrivateInfos 配置项 声明api的使用
使用前要授权 使用小程序期间和离开小程序后
// 打开前后台监听位置
wx.startLocationUpdateBackground({
type: 'gcj02',
success: (res) => {
console.log('res%%%', res)
}
})
// 位置发生变化
wx.onLocationChange((res) => {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
this.setData({
positionObj: {
latitude,
longitude,
speed,
accuracy
},
})
let markers = [{
// https://img.tukuppt.com/png_preview/00/08/06/7zsSasvrKP.jpg!/fw/780
iconPath: '../../static/地点.png',
name: 'my',
id: 1, // Id支持多个，方便后期点击浮标获取相关信息
latitude: latitude, // 经度
longitude: longitude, //纬度
width: 50, // 浮标宽度
height: 50, // 浮标高度
zIndex: 999,
}]
this.setData({
markers: markers
})
console.log('markers', this.data.markers)
}
)
onLocationChange 使用前 必须先调用wx.startLocationUpdateBackground ，该函数接收一个配置项参数 其中 type 和getLocation api的type一样， 可以选择 wgs84 和 gcj02 ，默认 gcj02。 建议使用gcj02会更精准一点wx.startLocationUpdateBackground(Object object) | 微信开放文档 (qq.com)
在开启后台定位后就可以使用onLocationChange了， onLocationChange接收一个回调函数，其回调函数接收一个参数，该参数的值和getLocation获取的值一样，前提是你startLocationUpdateBackground配置的type和getLocation配置的type类型是一样的。
将得到的位置信息重新赋值就可以得到实时变化的位置地图了。注意图标也要重新赋值位置信息。
<map wx:if="{{isShowMap}}" class="maps" longitude="{{positionObj.longitude}}" latitude="{{positionObj.latitude}}" markers="{{markers}}" ></map>
四、其他api
4.1 openLocation
打开微信内置地图，是腾讯地图小程序吧还是啥的，调用就能使用基本的地图功能，不需要结合map组件生成地图wx.openLocation(Object object) | 微信开放文档 (qq.com) 1.
wx.getLocation({
type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
success (res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 18
})
}
})
4.2 offLocationChange
关闭LocationChange的监听，如果不想要实时位置变化了最好还是关闭。 wx.offLocationChange(function listener) | 微信开放文档 (qq.com)
