目前功能日漸豐富的web應(yīng)用或APP都需要使用到地圖定位茎匠、導(dǎo)航等功能褂傀，但是局限于自身的開發(fā)能力以及資源的限制柒室，往往需要借助其他地圖供應(yīng)商的數(shù)據(jù)或服務(wù)來滿足自己的需求履磨。因此許多在線地圖服務(wù)商在滿足自身需求的前提下蛉抓，作為第三方開放平臺(tái)，為應(yīng)用程序開發(fā)者提供了諸多地圖服務(wù)的功能接口剃诅。
高德地圖是阿里巴巴旗下的地理位置服務(wù)平臺(tái)巷送，提供了豐富的地圖產(chǎn)品與服務(wù)。為各行各業(yè)制定了多種解決方案矛辕，尤其是貨運(yùn)和電商行業(yè)笑跛。目前我們系統(tǒng)用到的服務(wù)有地圖定位、地圖導(dǎo)航聊品、路線規(guī)劃飞蹂、POI搜索、地圖選點(diǎn)和物流軌跡等翻屈。

高德地圖的使用

地圖的引入和初始化以及一些基本圖層和事件在官方文檔都有陈哑，這里就不在描述了，接下來重點(diǎn)介紹我們項(xiàng)目中用的地圖的重點(diǎn)業(yè)務(wù)場(chǎng)景伸眶。附帶文檔地址：https://lbs.amap.com/

地圖拖拽選址

拖拽地圖需要實(shí)時(shí)獲取到標(biāo)記點(diǎn)所在的詳細(xì)地理位置惊窖，如下圖所示：

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

拖拽成功后返回值positionResult包含的數(shù)據(jù)格式如下

地圖模糊搜索

在拖拽選址基礎(chǔ)上我們還需要能夠進(jìn)行模糊搜索直接定位到目標(biāo)地點(diǎn)附近呼猪。搜索需要用到高德地圖組件PoiPicker阱飘，在給定的輸入框上集成輸入提示和關(guān)鍵字搜索功能驹吮，方便用戶選取特定地點(diǎn)（即POI）依疼。

    const poiPicker = new PoiPicker({
      input: searchInputRef,// 搜索需要的輸入框DOM
      placeSearchOptions: {
        map: mapObj,// 初始化后的地圖對(duì)象
        pageSize: 10
      },
      searchResultsContainer: searchResultsRef,// 呈現(xiàn)搜索結(jié)果的DOM
      city: '西安',// 搜索的城市范圍
    });

初始化PoiPicker之前需要提前在地圖DOM對(duì)象處增加搜索輸入框和呈現(xiàn)搜索結(jié)果的容器剖煌，位置和樣式需要自己提前處理好材鹦。初始化完后輸入框輸入關(guān)鍵字，容器中則會(huì)呈現(xiàn)對(duì)應(yīng)的搜索結(jié)果耕姊。

搜索大明宮

//監(jiān)聽poi選中信息
  poiPicker.on('poiPicked', function(poiResult) {
    //用戶選中的poi點(diǎn)信息
    const { source, item} = poiResult;
    if (source === 'suggest') {
        poiPicker.searchByKeyword(item.name);
    } else { console.log(item) }
  });

poiResult數(shù)據(jù)格式如下

{
    source: 'search',       //信息來源桶唐，search代表搜索服務(wù)，suggest代表輸入提示,如果是輸入提示則需要再次進(jìn)行關(guān)鍵詞搜索
    item: {
        "id": "B000A8WXY0", //poi點(diǎn)的id
        "name": "***",      //名稱
        "location": lnglat, //經(jīng)緯度茉兰，AMap.LngLat實(shí)例,
        "address": "***",    //地址信息
        "adcode":""尤泽，//區(qū)縣編碼
        "adname":""，//區(qū)縣名稱
        "cityname":""，//市級(jí)名稱
        "pname":""坯约，//省名稱
    }
}

至此熊咽，我們可以看到最終獲取到的數(shù)據(jù)與上述拖拽選址得到的結(jié)果一致，滿足業(yè)務(wù)需求闹丐。
溫馨提示：一些直轄市或者省轄縣可能會(huì)出現(xiàn)行政編碼不滿足省市區(qū)3級(jí)聯(lián)動(dòng)下拉框横殴，需要進(jìn)行特殊處理，這里不在贅述卿拴。

地理編碼服務(wù)

有時(shí)候可能會(huì)做一些老數(shù)據(jù)的兼容處理衫仑，在我們系統(tǒng)中一些地址信息老數(shù)據(jù)只省市區(qū)和詳細(xì)地址兩個(gè)字符串，沒有省市區(qū)的行政編碼巍棱，這種在后續(xù)業(yè)務(wù)處理上會(huì)非常困難惑畴，所以我們要盡可能的將這些老數(shù)據(jù)解析為帶行政編碼的數(shù)據(jù)蛋欣，這個(gè)時(shí)候就需要地圖的地理編碼服務(wù)航徙。

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

  geocoder.getLocation('北京市海淀區(qū)蘇州街', function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // result中對(duì)應(yīng)詳細(xì)地理坐標(biāo)信息
    }
  })
})

其中 result信息如表格所示

geocodes中包含的信息就是每一個(gè)地理坐標(biāo)對(duì)象

addressComponent則包含了上述拖拽選址和模糊搜索的地理位置字段，有province凿掂、city伴榔、citycode、district庄萎、adcode等踪少，根據(jù)這些字段，可以精確的獲取到省市區(qū)名稱和編碼糠涛，這樣新的地理數(shù)據(jù)就轉(zhuǎn)換好了援奢。