基于Leaflet和高德Web API扩展地理编码服务

需求背景：

需求很简单就是想调用高德地图的地理编码服务，单独扩展一个类出来。

参考地址：

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

转载自：https://blog.csdn.net/wml00000/article/details/84957541