微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
采坑記錄:
1.微信小程序對騰訊地圖的支持好。拓展強,不建議使用其他地圖
2.坐標問題** 高德地圖與騰訊地圖使用的是 GCJ02坐標系
3.使用微信小程序的內(nèi)置方法的經(jīng)緯度存在偏差。解決方案看下文
4.圖下的地圖選點插件頁面沒有辦法改變頁面內(nèi)容,官方的
5.引入的官方的js,所以說還有一些功能也是可以用的。感覺官網(wǎng)沒說太仔細(先把地圖做出來,再看這個網(wǎng)址的文檔,不然容易亂)
https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html
上效果圖
流程記錄:
1.申請 key值
根據(jù)官方文檔如下。將插件添加到正在做的小程序中
https://lbs.qq.com/miniprogram_plugin/introduce.html
2.使用地圖選點插件Demo
https://lbs.qq.com/miniprogram_plugin/location-picker.html
以下是我的代碼的使用記錄:
1、在app.json中引入插件包 、設置定位授權
2.看那個頁面要引用js中
1.先引入變量。為了拓展性,我這里進行了封裝
2.設置一個跳轉到地圖插件的函數(shù),并在 xwml中設置一個跳轉事件。(地圖選點插件頁面沒有辦法改變里面的內(nèi)容,官方的)中間那個兩個參數(shù)是經(jīng)緯度
3.用戶選點了以后,在onShow中確定,用戶選點函數(shù)執(zhí)行之后的回調(diào)函數(shù)
采坑細節(jié)問題記錄:
1.微信小程序對騰訊地圖的支持好,拓展好,不建議使用其他的地圖。本章小程序用的是官方提供的地圖插件。
2坐標問題 高德地圖與騰訊地圖使用的是 GCJ02坐標系。百度地圖采用的是 BD09坐標系。如下圖:如果你的網(wǎng)頁端或者APP端,用的是 百度地圖的話。經(jīng)緯度坐標需要轉換成GCJ02坐標,本文不談怎么轉換
3.使用微信小程序的內(nèi)置方法的經(jīng)緯度存在偏差,去獲取地圖經(jīng)緯度的話,有偏差。如圖是官方的APi,使用的wgs84,需要將 type類型改成gci02。圖下下是官方的解釋:
4.js功能的實現(xiàn)
逆地址解析(坐標位置描述) 也就是傳入經(jīng)緯度,返回所在的地方的位置。
文檔如下:
https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
舉例子: 逆地址解析(坐標位置描述) 文檔下方也有Demo
1.在那個頁面用就在頁面的js中 引入js(紅圈的兩個),并且實例化類
2.js中的代碼,調(diào)用 qqmapsdk.reverseGeocoder() 即可
總結
以上是生活随笔為你收集整理的微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微信小程序 事件点击后如何动态增删cl
- 下一篇: 微信小程序 下拉刷新页面时的加载状态