這是之前寫在個人博客的文章,現在搬過來
背景
在小程序中使用map組件,可以調用騰訊地圖的API,將一些固定的點標記到地圖界面上,點的經緯度獲取是通過android端百度地圖API獲取的,所以此時將這個位置點信息直接設置上去會出現偏差,而且偏差還比較大
小程序設置位置點
關於如何在map組件上設置位置點,詳細請查看騰訊官方文檔首先看一下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是需要設置在地圖界面的位置點數組,數組中的元素就是一個對象。
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如果直接給其他地圖定位的點,那麼相同的這個點位置,在小程序中會出現偏差;
原因
小程序中的定位方式默認的是wgs84
,而百度地圖中使用的是BD09
,還有gcj02
。所以這裏會出現偏差。
解決方案
使用離線的js庫gcoord,將位置信息進行一次轉換;
- 首先下載這個js庫,放至某一個目錄下,我這裏是utils下
- 在需要的界面導入
import gcoord from '../../../utils/gcoord.js'
- 調用轉換函數
var result = gcoord.transform(
[resArr[i].JD, resArr[i].WD], // 經緯度座標
gcoord.BD09, // 當前座標系(百度)
gcoord.GCJ02);
這裏在小程序中修改爲gcj02,國測數據,因此轉爲gcj02;
最後
- 本文內容個人拙見,若有出入,歡迎指正。
- 歡迎賞臉關注:家佳Talk