前言

要说阿落在开发电商项目时，遇到头疼的问题之一，那就是根据地址信息获取经纬度。

在获取经纬度时，在项目中一般有两种处理方式。

一种是根据用户填写的详细地址，去调用高德地图的API获取经纬度，这种一般作用于用户收货地址，然后用收货地址来获取经纬度，用来匹配最近的仓库；

一种是在后台提供选择地址的功能，通过输入的地址或选取的地图的点获取经纬度，这种一般作用于仓库定位、线下商家定位等；

这篇文章，阿落要说的就是第二种，在页面中提供搜索地址或地图选点的方式获取经纬度。

1.实现目标

(1)输入地址，获取详细地址与经纬度

当在后台编辑时，在文本框输入完地址后，选择目标地址或需要的地址，自动获取该地址在地图中的详细地址字符串，以及该地址对应的经纬度；

图片1

(2)输入地址时对地址联想

一个地址名词，可能会有多处地方，当想不起来是在哪个区域时，就需要地图来帮助我们智能联想了。所以，当我们在文本框输入地址后，自动联想该地址关联的地址列表，供我们参考或选择。

图片2

2.代码实现

备注：前端框架使用的为LayUI

（1）Html代码

<p   >  <p >    <p   lay-filter="address-table-form">      <p  >        <p >          <p >            <button   >保存</button>          </p>        </p>      </p>      <p >        <label >  详细地址</label>          <!-- 这里是地图中的详细地址、经纬度信息，都是只读属性，通过选取地址或选点的方式更新 -->        <p >          <input type="text"                 name="address" readonly               th:value="${mechanism.address}">          <input type="text"                 name="latitude" readonly  />          <input type="text"                 name="longitude" readonly  />        </p>      </p>       <!-- 省市区的级联信息，可用来扩展保存 -->      <p >        <label ><span >* </span>省市区</label>        <p >          <ｓｅｌｅｃｔ name="province"  data-type="province" data-click="province-clean">            <option value="">请选择</option>            <option th:each="p : ${provinceList}" th:value="${p.id}" th:text="${p.name}"                th:selected="${#strings.equals(mechanism.province,p.id)}"></option>          </ｓｅｌｅｃｔ>        </p>        <p  >          <ｓｅｌｅｃｔ  name="city" data-type="city" data-click="city-clean">            <option th:each="c : ${cityList}" th:value="${c.id}" th:text="${c.name}"                th:selected="${#strings.equals(mechanism.city,c.id)}"></option>          </ｓｅｌｅｃｔ>        </p>        <p  >          <ｓｅｌｅｃｔ  name="district" data-type="area">            <option th:each="a : ${areaList}" th:value="${a.id}" th:text="${a.name}"                th:selected="${#strings.equals(mechanism.district,a.id)}"></option>          </ｓｅｌｅｃｔ>        </p>      </p>      <p >        <label ><span >* </span>输入地址</label>        <p >           <!-- 输入地址的文本框 -->          <input type="text"                  autocomplete="off"              placeholder="获取经纬度定位以详细地址为准">            <!-- 高德地图显示的容器 -->          <p  ></p>        </p>      </p>    </p>  </p></p>

（2）JavaScript代码

<!-- 引入的高德地图JS，key为在高德开放平台申请后将会有对应信息 --><ｓｃｒｉｐｔ type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=xxx"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>  $(document).ready(function () {    let map = new AMap.Map('container', {      resizeEnable: true, // 是否监控地图容器尺寸变化      zoom: 11, // 初始地图级别      //center: [116.397428, 39.90923] //初始化地图中心点     });        //**，选中时获取经纬度信息    AMap.event.addListener(map, 'click', getLnglat);        //根据输入的信息加载地图UI    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {      let poiPicker = new PoiPicker({        // city:'北京',        input: 'tip-input'       });      // 初始化poiPicker      poiPickerReady(poiPicker);     });        //获取经纬度信息    function getLnglat(e) {      map.clearMap();      var x = e.lnglat.getLng();      var y = e.lnglat.getLat();      $("input[name=longitude]").val(e.lnglat.getLng());      $("input[name=latitude]").val(e.lnglat.getLat());      lnglatXY = new AMap.LngLat(x, y);      geocoder();     }    function geocoder() {      var MGeocoder;      //加载地理编码插件      map.plugin(["AMap.Geocoder"], function () {        MGeocoder = new AMap.Geocoder({          radius: 1000,          extensions: "all"         });        //返回地理编码结果        AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);        //逆地理编码        MGeocoder.getAddress(lnglatXY);       });      //加点      var marker = new AMap.Marker({        map: map,        icon: new AMap.Icon({          // image: " http://api.amap.com/Public/images/js/mark.png" ,          size: new AMap.Size(58, 30),          imageOffset: new AMap.Pixel(-32, -0)         }),        position: lnglatXY,        offset: new AMap.Pixel(-5, -30)       });     }    //回调函数    function geocoder_CallBack(data) {      //返回地址描述      var addr = data.regeocode.addressComponent;      var cityId = addr.adcode;      $("#address-detail").val(addr.township + addr.street + addr.streetNumber);     }    function poiPickerReady(poiPicker) {      window.poiPicker = poiPicker;      let marker = new AMap.Marker();      let infoWindow = new AMap.InfoWindow({        offset: new AMap.Pixel(0, -20)       });      // 选取了某个POI      poiPicker.on('poiPicked', function(poiResult) {        var source = poiResult.source,          poi = poiResult.item,          info = {            source: source,            id: poi.id,            name: poi.name,            location: poi.location.toString(),            address: poi.address           };        $("#address-detail").val(poi.address+info.name);        $("#lat").val(poi.location.lat);        $("#lng").val(poi.location.lng);        marker.setMap(map);        infoWindow.setMap(map);        marker.setPosition(poi.location);        infoWindow.setPosition(poi.location);        infoWindow.setContent('详细信息: <pre>' + info.name+'<br>'+info.address + '</pre>');        infoWindow.open(map, marker.getPosition());        // map.setCenter(marker.getPosition());       });      poiPicker.onCityReady(function() {        // poiPicker.suggest('');        marker.setMap(map);        infoWindow.setMap(map);        infoWindow.setContent('详细信息: <pre>'+""+'</pre>');        infoWindow.open(map);       });     }   })</ｓｃｒｉｐｔ>

4.结语

本篇内容就到这里了，对于获取经纬度，大家还有什么更好的建议或方式吗。