百度小程序-map組件定位


給客戶開發一個百度小程序,有個地圖定位顯示。百度小程序內置的api地圖是不准的,通過百度一下,查詢到坐標偏移算法公式,自己項目中使用,手機測試坐標已經正常顯示!

經緯度,通過百度坐標拾取器拾取到!

.swan文件

<map id="myMap" style="width:100%;height:50vh;" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"></map>

.js文件

 1 Page({
 2     data: {
 3         longitude: '120.93032',
 4         latitude: '30.804545',
 5         markers: []
 6     },
 7     onLoad: function () {
 8         // 監聽頁面加載的生命周期函數
 9         this.Map_Fn();
10     },
11     onReady: function () {
12         // 監聽頁面初次渲染完成的生命周期函數
13         this.mapContext = swan.createMapContext('myMap');
14     },
15     onShow: function () {
16         // 監聽頁面顯示的生命周期函數
17     },
18     onHide: function () {
19         // 監聽頁面隱藏的生命周期函數
20     },
21     onUnload: function () {
22         // 監聽頁面卸載的生命周期函數
23     },
24     onPullDownRefresh: function () {
25         // 監聽用戶下拉動作
26     },
27     onReachBottom: function () {
28         // 頁面上拉觸底事件的處理函數
29     },
30     onShareAppMessage: function () {
31         // 用戶點擊右上角轉發
32     },
33     Map_Fn: function () {
34         let pi = 3.14159265358979324 * 3000.0 / 180.0;
35         let x = this.data.longitude - 0.0065;
36         let y = this.data.latitude - 0.006;
37         let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
38         let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
39         this.setData({
40             longitude: z * Math.cos(theta),
41             latitude: z * Math.sin(theta),
42             markers: [
43                 {
44                     id: '1',
45                     latitude: z * Math.sin(theta),
46                     longitude: z * Math.cos(theta),
47                     iconPath: '/images/api_logo.png',
48                     callout: {
49                         display: 'ALWAYS',
50                         content: '嘉善新西塘孔雀城1'
51                     }//真機里顯示
52                 }
53             ]
54         });
55         console.log("計算過后的經度"+x);
56         console.log("計算過后的緯度"+y);
57     }
58 });

參考網址:https://blog.csdn.net/coolypf/article/details/8569813


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM