微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

采坑记录:
1.微信小程序对腾讯地图的支持好。拓展强,不建议使用其他地图
2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系
3.使用微信小程序的内置方法的经纬度存在偏差。解决方案看下文
4.图下的地图选点插件页面没有办法改变页面内容,官方的
5.引入的官方的js,所以说还有一些功能也是可以用的。感觉官网没说太仔细(先把地图做出来,再看这个网址的文档,不然容易乱)
https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

上效果图

微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

流程记录:

1.申请 key值

根据官方文档如下。将插件添加到正在做的小程序中
https://lbs.qq.com/miniprogram_plugin/introduce.html

2.使用地图选点插件Demo

https://lbs.qq.com/miniprogram_plugin/location-picker.html

以下是我的代码的使用记录:

1、在app.json中引入插件包 、设置定位授权

微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

2.看那个页面要引用js中

1.先引入变量。为了拓展性,我这里进行了封装
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
2.设置一个跳转到地图插件的函数,并在 xwml中设置一个跳转事件。(地图选点插件页面没有办法改变里面的内容,官方的)中间那个两个参数是经纬度
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
3.用户选点了以后,在onShow中确定,用户选点函数执行之后的回调函数
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

采坑细节问题记录:

1.微信小程序对腾讯地图的支持好,拓展好,不建议使用其他的地图。本章小程序用的是官方提供的地图插件。
2坐标问题 高德地图与腾讯地图使用的是 GCJ02坐标系。百度地图采用的是 BD09坐标系。如下图:如果你的网页端或者APP端,用的是 百度地图的话。经纬度坐标需要转换成GCJ02坐标,本文不谈怎么转换
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
3.使用微信小程序的内置方法的经纬度存在偏差,去获取地图经纬度的话,有偏差。如图是官方的APi,使用的wgs84,需要将 type类型改成gci02。图下下是官方的解释:
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

4.js功能的实现

逆地址解析(坐标位置描述) 也就是传入经纬度,返回所在的地方的位置。

文档如下:
https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

举例子: 逆地址解析(坐标位置描述) 文档下方也有Demo

1.在那个页面用就在页面的js中 引入js(红圈的两个),并且实例化类

微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现

2.js中的代码,调用 qqmapsdk.reverseGeocoder() 即可

微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现