微信小程序 騰訊地圖顯示偏差問題解決
背景
在小程序中使用map組件，可以調(diào)用騰訊地圖的API，將一些固定的點(diǎn)標(biāo)記到地圖界面上，點(diǎn)的經(jīng)緯度獲取是通過android端百度地圖API獲取的，所以此時(shí)將這個(gè)位置點(diǎn)信息直接設(shè)置上去會(huì)出現(xiàn)偏差，而且偏差還比較大
小程序設(shè)置位置點(diǎn)
關(guān)于如何在map組件上設(shè)置位置點(diǎn)，詳細(xì)請查看騰訊官方文檔
首先看一下map組件：
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
其markers是需要設(shè)置在地圖界面的位置點(diǎn)數(shù)組，數(shù)組中的元素就是一個(gè)對象。
markers: [{
iconPath: "/resources/others.png",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
},
iconPath: "/resources/others.png",
id: 0,
latitude: 23.094994,
longitude: 113.424520,
width: 50,
height: 50
}],
這里的latitude和longitude如果直接給其他地圖定位的點(diǎn)，那么相同的這個(gè)點(diǎn)位置，在小程序中會(huì)出現(xiàn)偏差；
原因
小程序中的定位方式默認(rèn)的是wgs84,而百度地圖中使用的是BD09 ，還有g(shù)cj02。所以這里會(huì)出現(xiàn)偏差。
解決方案
使用離線的js庫gcoord,將位置信息進(jìn)行一次轉(zhuǎn)換；
首先下載這個(gè)js庫，放至某一個(gè)目錄下，我這里是utils下
在需要的界面導(dǎo)入
import gcoord from '../../../utils/gcoord.js'
調(diào)用轉(zhuǎn)換函數(shù)
var result = gcoord.transform(
[resArr[i].JD, resArr[i].WD], // 經(jīng)緯度坐標(biāo)
gcoord.BD09, // 當(dāng)前坐標(biāo)系（百度）
gcoord.GCJ02);
這里在小程序中修改為gcj02,國測數(shù)據(jù)，因此轉(zhuǎn)為gcj02；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)異步圖像上傳功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本)，同時(shí)將其上載到服務(wù)器，而無需等待操作完成。需要的朋友可以參考下2018-07-07
在網(wǎng)頁中使用document.write時(shí)遭遇的奇怪問題
很多時(shí)候我們都會(huì)在網(wǎng)頁上的JavaScript中使用document.write來寫入一些東西，有的時(shí)候可能因?yàn)槲覀儫o法改變某一部分HTML而不得不使用這樣的辦法，也有的時(shí)候是因?yàn)樵谶M(jìn)行跨應(yīng)用的腳本調(diào)用。2010-08-08
JavaScript監(jiān)聽手機(jī)物理返回鍵的兩種解決方法
JavaScript沒有監(jiān)聽物理返回鍵的API，所以只能使用 popstate 事件監(jiān)聽。接下來通過本文給大家分享JavaScript監(jiān)聽手機(jī)物理返回鍵的兩種解決方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了微信小程序如何獲取用戶頭像和昵稱，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用
這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序可滑動(dòng)周日歷組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
這篇文章主要介紹了js?fill函數(shù)填充數(shù)組或?qū)ο蟮膯栴}及解決方法，本文給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了使用命令對象代替switch語句的寫法示例,JS規(guī)范里面是禁止使用switch語句的,使用命令對象可以完美的解決這個(gè)問題,需要的朋友可以參考下2015-02-02
JavaScript中常見的高階函數(shù)總結(jié)
JavaScript的函數(shù)其實(shí)都指向某個(gè)變量,既然變量可以指向函數(shù),函數(shù)的參數(shù)能接收變量,那么一個(gè)函數(shù)就可以接收另一個(gè)函數(shù)作為參數(shù),這種函數(shù)就稱之為高階函數(shù),這篇文章主要給大家介紹了關(guān)于JavaScript中常見的高階函數(shù),需要的朋友可以參考下2022-02-02