此篇以百度地圖為例 1、去高德地圖註冊自己的key(註冊流程可借鑒百度地圖註冊流程) 2、什麼是坐標 地球坐標系——WGS84:常見於 GPS 設備,Google 地圖等國際標準的坐標體系。 火星坐標系——GCJ-02:中國國內使用的被強制加密後的坐標體系,高德坐標就屬於該種坐標體系。 百度坐標系— ...
此篇以百度地圖為例
1、去高德地圖註冊自己的key(註冊流程可借鑒百度地圖註冊流程)
2、什麼是坐標
- 地球坐標系——WGS84:常見於 GPS 設備,Google 地圖等國際標準的坐標體系。
- 火星坐標系——GCJ-02:中國國內使用的被強制加密後的坐標體系,高德坐標就屬於該種坐標體系。
- 百度坐標系——BD-09:百度地圖所使用的坐標體系,是在火星坐標系的基礎上又進行了一次加密處理
3、坐標系轉
為什麼做圖標轉化,我們在介面處獲取的坐標(經緯度)可能是GPS傳入的,也可能是其他項目中使用的其他地圖系獲取的坐標,例如百度地圖,騰訊地圖等。這些放到不同的地圖中會有偏差。導致精度不准。所以我們需要將坐標轉化為我們當前使用地圖所契合的經緯度。
1.在高德地圖中使用 高德地圖JS文檔中的 API —— AMap.convertFrom() 來進行坐標轉化
//經緯度轉化 // 參數說明:需要轉換的坐標,需要轉換的坐標類型,轉換成功後的回調函數 AMap.convertFrom( [that.comlng, that.comlat], "baidu",//這個填寫的是 需要轉化的坐標及類型 此處填寫的是baidu就是轉化百度坐標,此值可選三個【gps:GPS基礎坐標】、【baidu:百度地圖坐標】、【mapbar:圖吧坐標】
function (status, result) { if (result.info === "ok") { that.gaodeMaplng = result.locations[0].lng; that.gaodeMaplat = result.locations[0].lat; // console.log(result.locations[0]); // 構造點標記 var marker = new AMap.Marker({ label: { content: `${that.compText}` }, icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [result.locations[0].lng, result.locations[0].lat], anchor: "bottom-center", }); // 構造矢量圓形 var circle = new AMap.Circle({ center: new AMap.LngLat( `${result.locations[0].lng}`, `${result.locations[0].lat}` ), // 圓心位置 radius: 1000, //半徑 strokeColor: "rgb(253,221,155)", //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 3, //線粗細度 fillColor: "rgb(253,221,155)", //填充顏色 fillOpacity: 0.35, //填充透明度 }); // 將以上覆蓋物添加到地圖上 // add方法可以傳入一個覆蓋物數組,將點標記和矢量圓同時添加到地圖上 map.add(marker); map.add(circle); } } );
前半段是對傳入經緯度進行處理,後續轉化成功後可搭配構造點標記,連線,構造矢量圖形等來展示地圖