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

高德地图的使用

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

地图拖拽选址

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

    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信息如表格所示

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

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