需求背景：

需求很簡單就是想調用高德地圖的地理編碼服務，單獨擴展一個類出來。

參考地址：

Leaflet類擴展：https://leafletjs.com/examples/extending/extending-1-classes.html?tdsourcetag=s_pcqq_aiomsg

高德Web服務：https://lbs.amap.com/api/webservice/guide/api/georegeo

注意事項：

1.注意申請key;

2.Leaflet默認EPSG 3857坐標系，高德地圖坐標系為GCJ-02，這倆其實一樣。由于是調用高德的服務，如果地圖為非3857坐標系，要注意坐標轉換問題。

相關代碼：

Geocoder.js:

L.GeoCoder = L.Class.extend({initialize: function () {this._geoUrl = 'https://restapi.amap.com/v3/geocode/geo?';this._regeoUrl = 'https://restapi.amap.com/v3/geocode/regeo?';this._address = " ";this._location = " ";},/*** 正向地理編碼： 將地址描述信息轉換成地理坐標（經緯度）*/getLocation: function (address,callback) {let me = this;var url = this._buildGeoUrl(address);var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else {request = new ActiveXObject('Microsoft.XMLHTTP');}request.onreadystatechange = function () { // 狀態發生變化時，函數被回調if (request.readyState === 4) { // 成功完成// 判斷響應結果:if (request.status === 200) {// 成功，通過responseText拿到響應的文本:return me._geoSuccess(request.responseText,callback);} else {// 失敗，根據響應碼判斷失敗原因:return me._geoFail(request.status);}} else {// HTTP請求還在繼續...}}// 發送請求:request.open('GET', url);request.send();},/*** 逆向地理編碼：將地理坐標（經緯度）轉換成地址描述信息*/getAddress: function (location,callback) {let me = this;var url = this._buildRegeoUrl(location);var request;if(window.XMLHttpRequest){request = new XMLHttpRequest();} else {request = new ActiveXObject('Microsoft.XMLHTTP');}request.onreadystatechange= function () {if(request.readyState === 4){if(request.status === 200){return me._regeoSuccess(request.responseText,callback);}else {return me._regeoFail(request.status);}}else {//}}request.open('GET',url);request.send();},/*** 構建正向地理編碼請求地址* @private*/_buildGeoUrl: function (address) {var url = this._geoUrl + 'address=' + address + '&key=yourkey';return url;},/*** 構建逆地理編碼請求地址* lnglat 經緯度坐標 格式：[110.235,38.31]* @private*/_buildRegeoUrl: function (lnglat) {var url = this._regeoUrl + 'location=' + lnglat[0] + ',' + lnglat[1] + '&key=yourkey';return url;},/*** 地理編碼服務請求成功，回調方法* @param response* @private*/_geoSuccess: function (response,callback) {return callback(response);},/*** 地理編碼服務請求失敗* @param response* @private*/_geoFail: function (error) {alert('請求失敗'+ error);},/*** 逆地理編碼服務請求成功，回調方法* @param response* @private*/_regeoSuccess: function (response,callback) {return callback(response);},_regeoFail: function (error) {alert("請求失敗"+ error);} });L.geoCoder = function(){return new L.GeoCoder(); }

example.html:

<script>//注意坐標問題，該服務基于高德，坐標系為EPSG：3857，如果底圖不是3857坐標系注意坐標轉換var map = L.map('map');L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',{maxZoom: 18,minZoom: 4,subdomains:["1","2","3","4"]}).addTo(map);map.setView(L.latLng(37.550339, 104.114129), 4);document.getElementById("geo").onclick = geoCode;function geoCode(){var address = document.getElementById("address").value;L.geoCoder().getLocation(address,function (res) {console.log(res);var json = JSON.parse(res);var lnglat = json.geocodes[0].location; //格式為：經度，緯度document.getElementById('lnglat').value = lnglat;var temp = lnglat.split(',');L.marker(L.latLng(temp[1],temp[0])).addTo(map);});} </script>

原文件下載地址：https://download.csdn.net/download/wml00000/10843528

總結

以上是生活随笔為你收集整理的基于Leaflet和高德Web API扩展地理编码服务的全部內容，希望文章能夠幫你解決所遇到的問題。

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