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

ゝ一纸荒年。 2023-05-31 06:40 28阅读 0赞

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

### 上效果图 ###

![在这里插入图片描述][20191023103453860.gif]

# 流程记录： #

## 1.申请 key值 ##

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

## 2.使用地图选点插件Demo ##

https://lbs.qq.com/miniprogram\_plugin/location-picker.html

# 以下是我的代码的使用记录： #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70]

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

1.先引入变量。为了拓展性，我这里进行了封装  
![在这里插入图片描述][201910231055569.png]  
2.设置一个跳转到地图插件的函数,并在 xwml中设置一个跳转事件。（地图选点插件页面没有办法改变里面的内容，官方的）中间那个两个参数是经纬度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20191023111405753.png]  
3.用户选点了以后，在onShow中确定，用户选点函数执行之后的回调函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 2]

# 采坑细节问题记录： #

**1.微信小程序对腾讯地图的支持好**，拓展好，不建议使用其他的地图。本章小程序用的是官方提供的地图插件。  
**2坐标问题** 高德地图与腾讯地图使用的是 **GCJ02坐标系**。百度地图采用的是 BD09坐标系。如下图：如果你的网页端或者APP端，用的是 百度地图的话。经纬度坐标需要转换成GCJ02坐标,本文不谈怎么转换  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 3]  
**3.使用微信小程序的内置方法的经纬度存在偏差**，去获取地图经纬度的话，有偏差。如图是官方的APi,使用的wgs84，需要将 type类型改成gci02。图下下是官方的解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 5]

# 4.js功能的实现 #

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

文档如下:  
https://lbs.qq.com/qqmap\_wx\_jssdk/method-reverseGeocoder.html

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

### 1.在那个页面用就在页面的js中 引入js（红圈的两个），并且实例化类 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 6]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 7]

[20191023103453860.gif]: /images/20230531/c957a62a8c1a41b7a420e3e6cdb50ed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70]: /images/20230531/80552d9e37994c6faa0369abe0cc9e50.png
[201910231055569.png]: /images/20230531/3869be94b64d46bebaa9b1c8356f63b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191023105735286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy,size_16,color_FFFFFF,t_70
[20191023111405753.png]: /images/20230531/a97ad6a8ca8942b8b3a63bac0ac4aa80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 2]: /images/20230531/6986862a5e12483b885fb54b2b1aa1a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 3]: /images/20230531/827eb3535f10490da76513b46b1b9c0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191023104233772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 5]: /images/20230531/174e6058be60485593d67b48be1065bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 6]: /images/20230531/429358b6292b4cb08d492544ab7c0f79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzQ5OTgy_size_16_color_FFFFFF_t_70 7]: /images/20230531/e622471bd026412c959a90564b73947a.png