高德地图的Web应用

目前功能日渐丰富的web应用或APP都需要使用到地图定位、导航等功能，但是局限于自身的开发能力以及资源的限制，往往需要借助其他地图供应商的数据或服务来满足自己的需求。因此许多在线地图服务商在满足自身需求的前提下，作为第三方开放平台，为应用程序开发者提供了诸多地图服务的功能接口。
高德地图是阿里巴巴旗下的地理位置服务平台，提供了丰富的地图产品与服务。为各行各业制定了多种解决方案，尤其是货运和电商行业。目前我们系统用到的服务有地图定位、地图导航、路线规划、POI搜索、地图选点和物流轨迹等。

高德地图的使用

地图的引入和初始化以及一些基本图层和事件在官方文档都有，这里就不在描述了，接下来重点介绍我们项目中用的地图的重点业务场景。附带文档地址：https://lbs.amap.com/

地图拖拽选址

拖拽地图需要实时获取到标记点所在的详细地理位置，如下图所示：

这里用到了高德地图的 组件PositionPicker，用于在地图上选取位置，并获取所选位置的地址信息，以及周边POI、周边道路、周边路口等信息

    const positionPicker = new PositionPicker({
      mode: 'dragMap',
      map: mapObj//地图初始化后的地图对象
    });
    positionPicker.on('success', function (positionResult) {
      console.log(positionResult)
    });
    positionPicker.start();

拖拽成功后返回值positionResult包含的数据格式如下

图中我们可以看到，返回的信息包括的省市区的名称和详细地址，最关键的还有县区的行政编码，通过此编码可以推出市级和省级编码。这样通过地图选址后的地址就可以转换成三级省市区联动的下拉框数据。

地图模糊搜索

在拖拽选址基础上我们还需要能够进行模糊搜索直接定位到目标地点附近。搜索需要用到高德地图组件PoiPicker，在给定的输入框上集成输入提示和关键字搜索功能，方便用户选取特定地点（即POI）。

    const poiPicker = new PoiPicker({
      input: searchInputRef,// 搜索需要的输入框DOM
      placeSearchOptions: {
        map: mapObj,// 初始化后的地图对象
        pageSize: 10
      },
      searchResultsContainer: searchResultsRef,// 呈现搜索结果的DOM
      city: '西安',// 搜索的城市范围
    });

初始化PoiPicker之前需要提前在地图DOM对象处增加搜索输入框和呈现搜索结果的容器，位置和样式需要自己提前处理好。初始化完后输入框输入关键字，容器中则会呈现对应的搜索结果。

搜索大明宫
监听搜索结果的选择事件：

//监听poi选中信息
  poiPicker.on('poiPicked', function(poiResult) {
    //用户选中的poi点信息
    const { source, item} = poiResult;
    if (source === 'suggest') {
        poiPicker.searchByKeyword(item.name);
    } else { console.log(item) }
  });

poiResult数据格式如下

{
    source: 'search',       //信息来源，search代表搜索服务，suggest代表输入提示,如果是输入提示则需要再次进行关键词搜索
    item: {
        "id": "B000A8WXY0", //poi点的id
        "name": "***",      //名称
        "location": lnglat, //经纬度，AMap.LngLat实例,
        "address": "***",    //地址信息
        "adcode":""，//区县编码
        "adname":""，//区县名称
        "cityname":""，//市级名称
        "pname":""，//省名称
    }
}

至此，我们可以看到最终获取到的数据与上述拖拽选址得到的结果一致，满足业务需求。
温馨提示：一些直辖市或者省辖县可能会出现行政编码不满足省市区3级联动下拉框，需要进行特殊处理，这里不在赘述。

地理编码服务

有时候可能会做一些老数据的兼容处理，在我们系统中一些地址信息老数据只省市区和详细地址两个字符串，没有省市区的行政编码，这种在后续业务处理上会非常困难，所以我们要尽可能的将这些老数据解析为带行政编码的数据，这个时候就需要地图的地理编码服务。

AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder()

  geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result中对应详细地理坐标信息
    }
  })
})

其中 result信息如表格所示

属性	类型	说明
info	String	成功状态说明
geocodes	Array.<Geocode>	地理编码结果，仅地理编码返回
resultNum	Number	地理编码结果数目，仅地理编码返回
regeocode	ReGeocode	逆地理编码结果，仅逆地理编码返回

geocodes中包含的信息就是每一个地理坐标对象

属性	类型	说明
addressComponent	AddressComponent	地址组成元素
formattedAddress	String	格式化地址规则：地址信息=基本行政区信息+具体信息；基本行政信息=省+市+区+乡镇
location	LngLat	坐标
adcode	String	区域编码
level	String	给定地址匹配级别，返回匹配最详细级别，如：“北京市海淀区苏州街”匹配级别为“道路”详见匹配级别列表

addressComponent则包含了上述拖拽选址和模糊搜索的地理位置字段，有province、city、citycode、district、adcode等，根据这些字段，可以精确的获取到省市区名称和编码，这样新的地理数据就转换好了。