一.需求描述:設備在上線時需要在上線點記錄所在地點的坐標和位置描述信息

分別需要實現三個功能

1.根據坐標點顯示位置信息，圖1中的紅色坐標點跳轉到圖2時，在騰訊地圖上標出所在坐標點，并顯示地點信息；

2.定位當前所在位置:點擊藍色圖標，會定位當前所在位置，在騰訊地圖中顯示如圖2中標示的①一樣的信息；

3.關鍵字搜索地址:在輸入框輸入關鍵信息后會顯示至多十個匹配的信息，點擊列表中的地址，會在騰訊地圖中顯示如圖中標示的①一樣的信息；

點擊圖2右上角【完成】按鈕，選中的位置信息中的坐標點和詳細地址描述信息會顯示在圖1中。

二.百度地圖坐標在騰訊地圖上的偏差問題

?因為瀏覽器端網站顯示的地圖使用的是百度地圖，之前寫入數據庫的坐標點全是基于百度地圖的，所以在實現小程序定位的時候想直接基于百度坐標去實現。需要注意，直接調用百度地圖小程序接口，在騰訊地圖上顯示時會出現很大的偏差，所以顯示地點坐標時需要使用騰訊地圖逆地址解析接口設置coor_type值為3(baidu經緯度），在位置信息保存時，再把騰訊地圖坐標轉換為百度地圖坐標。

三.功能實現代碼:

1.坐標點顯示詳細位置信息原來使用了百度提供逆地址解析，后面發現定位出來的位置信息有很大的偏差，所以采用了騰訊地圖的逆地址解析。

//根據坐標點在騰訊地圖中標識位置信息setInitMarker:function(location){var that = this; var fail = function(data) {console.log(data)};var success = function(data) { var wxMarkerData=[]//https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoderwxMarkerData.push({ // 獲取返回結果，放到mks數組中address: data.result.address,desc:data.result.formatted_addresses.recommend,id: 0,latitude: data.result.location.lat,longitude: data.result.location.lng,iconPath: '../../../images/marker_red.png',//圖標路徑width: 25,height: 25, });that.setData({markers: wxMarkerData}); that.showSearchInfo(wxMarkerData[0], 0);}qqmapsdk.reverseGeocoder({location:location,//百度地圖坐標點coord_type:3,//3是baidu經緯度fail: fail,success: success }); },

2. 當前位置定位功能使用也是騰訊地圖的逆地址解析?，關鍵在于，不設置location的值將默認定位到當前位置

//當前位置坐標點信息setCurrentLocation:function(){var that = this; var fail = function(data) {console.log(data)};var success = function(data) { //在騰訊地圖中獲取到騰訊的坐標點 var lng=data.result.location.lngvar lat=data.result.location.lat//將騰訊地圖坐標點轉換為百度地圖坐標點并設置經度和緯度的值，以便下一步保存，除此外騰訊位置信息保留顯示var coordinate=that.txMapToBdMap(lng,lat) that.setData({location: coordinate.lng+','+coordinate.lat ,longitude: coordinate.lng,latitude: coordinate.lat})wxMarkerData={iconPath: '../../../images/marker_red.png',iconTapPath: '../../../images/marker_red.png',width:30,height:30,longitude:data.result.location.lng,latitude:data.result.location.lat,address:data.result.address, desc:data.result.formatted_addresses.recommend}that.setData({markers: wxMarkerData}); that.showSearchInfo(wxMarkerData, 0);}qqmapsdk.reverseGeocoder({ //location不設置默認顯示當前位置fail: fail,success: success }); },//顯示坐標點的詳細地址信息showSearchInfo: function(data, i) {var that = this;that.setData({rgcData: {desc: data.desc + '\n',address: '地址：' + data.address + '\n'},chooseAddress:data.address});},

3.?地址關鍵詞搜索百度開放平臺提供的POI檢索熱詞聯想

//地圖定位部分的搜索框bindKeyInput: function(e) {var that = this; if (e.detail.value === '') {that.setData({sugData: ''});return;} var fail = function(data) {console.log(data)};var success = function(data) { that.setData({addressList: data.result});}BMap.suggestion({query: e.detail.value, region: this.data.content.city=='保亭'?'保亭黎族苗族自治':this.data.content.city,city_limit: true,fail: fail,success: success});}, //選擇搜索結果中地點chooseAddress:function(e){//得到騰訊地圖坐標數據var item=e.currentTarget.dataset.item //騰訊地圖轉換為百度地圖var coordinate= this.txMapToBdMap(item.location.lng,item.location.lat)var location=coordinate.lat+","+coordinate.lng this.setData({markers:item,chooseAddress:item.address,location:location, longitude:coordinate.lng,latitude:coordinate.lat})console.log("選中的坐標點1:"+location)this.setInitMarker(location)},

注意代碼中region的配置必須是市縣的全稱去掉市|縣！！！

下面的代碼是網上找的

// 騰訊地圖轉百度地圖經緯度txMapToBdMap:function (lng, lat) { let x_pi = 3.14159265358979324 * 3000.0 / 180.0;let x = lng;let y = lat;let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);let lngs = z * Math.cos(theta) + 0.0065;let lats = z * Math.sin(theta) + 0.006;var lng=lngs.toFixed(6)var lat=lats.toFixed(6)return {lng: lng,lat: lat } },

總結

以上是生活随笔為你收集整理的使用百度地图坐标在微信小程序中定位显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。