上次在实现一个需求时，需要在web端实现定位功能。即实现在web端搜索定位的功能。首先看一下效果如下：

功能也相对不是很难，就是需要调用调用地图插件来完成页面地图的加载与显示，本来是打算选取某度的地图，偶然发现高德地图的api也很详细，所以来尝试一下。闲话少说，看具体实现。
1.首先申请一个高德地图的开发平台秘钥
这个秘钥在我们调用高德地图的api中需要使用到，所以必须要申请一个。申请方式搜索高德地图，进入官网，注册一个账号，在控制台里可以看到申请开发秘钥功能。
2.建立Index.vue文件
在Index.vue中放入以下代码，主要设置的是地图布局的样式。

	<div class="col-md-12" style="text-align: center;padding-top: 50px"  v-if="placeSearch">
        <label for="location">找到我们：</label>
        <input type="text" name="location" style="width: 300px;border-radius: 6px" v-model="keyWord"/>
        <button class="btn-danger" name="search" style="border-radius: 6px" @click="handleSearch">搜索</button>
    </div>
      <div class="row col-md-12" style="padding-top: 30px">
      <div id="searchResult" class="col-md-3"></div>
      <div id="mapContainer" class="col-md-6" style="height: 500px;" >正在加载数据 ...</div>
      </div>

UI框架选择了bootstrap，所以上面选用的是栅格布局。
3.引入vue-amap
（1）如果是利用vue-cli搭建的工程，首先利用npm方式安装vue-amap。安装代码如下所示：

npm install vue-amap --save

如果不是利用脚手架搭建，只是单页面应用程序，可以通过cdn方式引入：

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

（2）若是利用vue-cli搭建工程，安装完vue-amap之后，入口文件main.js中记得调用，代码如下：

Vue.use(AMap);

4.新建mapConfig.js文件，用来放置申请的秘钥等相关变量参数，因为我的功能还需要在指定城市搜索，所以定义了一个mapCityName来存储城市名，具体文件内容如下：

	// 高德地图 key
    export const MapKey = '申请的高德秘钥'
    // 地图限定城市
    export const MapCityName = '杭州'

5.同时我们还需要创建一个函数来动态生成script的标签，创建remoteLoad.js文件。内容如下：

export default function remoteLoad (url, hasCallback) {
  return createScript(url)
  /**
   * 创建script
   * @param url
   * @returns {Promise}
   */
  function createScript (url) {
    let scriptElement = document.createElement('script')
    document.body.appendChild(scriptElement)
    let promise = new Promise((resolve, reject) => {
      scriptElement.addEventListener('load', e => {
        removeScript(scriptElement)
        if (!hasCallback) {
          resolve(e)
        }
      }, false)

      scriptElement.addEventListener('error', e => {
        removeScript(scriptElement)
        reject(e)
      }, false)

      if (hasCallback) {
        window.____callback____ = function () {
          resolve()
          window.____callback____ = null
        }
      }
    })

    if (hasCallback) {
      url += '&callback=____callback____'
    }

    scriptElement.src = url

    return promise
  }

  /**
   * 移除script标签
   * @param scriptElement script dom
   */
  function removeScript (scriptElement) {
    document.body.removeChild(scriptElement)
  }
}

6.在Index.vue中的调用及methods方法如下所示：

 <template>
    <div>
    <div class="col-md-12" style="text-align: center;padding-top: 50px"  v-if="placeSearch">
        <label for="location">找到我们：</label>
        <input type="text" name="location" style="width: 300px;border-radius: 6px" v-model="keyWord"/>
        <button class="btn-danger" name="search" style="border-radius: 6px" @click="handleSearch">搜索</button>
     </div>
          <div class="row col-md-12" style="padding-top: 30px">
          <div id="searchResult" class="col-md-3"></div>
          <div id="mapContainer" class="col-md-6" style="height: 500px;" >正在加载数据 ...</div>
     </div>
 </div>
 </template>
<script type="text/ecmascript-6">
  import remoteLoad from '@/utils/remoteLoad'
  import { MapKey, MapCityName } from '@/config/mapConfig'
  export default {
    props: ['lat', 'lng'],
    data () {
      return {
        keyWord: '阿里巴巴商学院',
        placeSearch: null,
        dragStatus: false,
        AMapUI: null,
        AMap: null,
      }
    }，
    methods: {
      // 搜索
      handleSearch () {
        if (this.keyWord) {
          this.placeSearch.search(this.keyWord)
      },
      // 实例化地图
      initMap () {
        // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        let AMapUI = this.AMapUI = window.AMapUI
        let AMap = this.AMap = window.AMap
        AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
          let mapConfig = {
            zoom: 16,
            cityName: MapCityName
          }
          if (this.lat && this.lng) {
            mapConfig.center = [this.lng, this.lat]
          }
          let map = new AMap.Map('mapContainer', mapConfig)
          // 加载地图搜索插件
          AMap.service('AMap.PlaceSearch', () => {
            this.placeSearch = new AMap.PlaceSearch({
              pageSize: 5,
              pageIndex: 1,
              citylimit: true,
              city: MapCityName,
              map: map,
              panel: 'searchResult'
            })
          })
          // 启用工具条
          AMap.plugin(['AMap.ToolBar'], function () {
            map.addControl(new AMap.ToolBar({
              position: 'RB'
            }))
          })
          // 创建地图拖拽
          let positionPicker = new PositionPicker({
            mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map: map // 依赖地图对象
          })
          // 拖拽完成发送自定义 drag 事件
          positionPicker.on('success', positionResult => {
            // 过滤掉初始化地图后的第一次默认拖放
            if (!this.dragStatus) {
              this.dragStatus = true
            } else {
              this.$emit('drag', positionResult)
            }
          })
          // 启动拖放
          positionPicker.start()
        })
      }
    },
    async created () {
      // 已载入高德地图API，则直接初始化地图
      if (window.AMap && window.AMapUI) {
        this.initMap()
        // 未载入高德地图API，则先载入API再初始化
      } else {
        await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
        await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
        this.initMap()
      }
    }
  }
</script>

至此，关键文件都已完成，具体功能也已实现。本文参考http://www.rxshc.com/140.html实现，感谢作者分享，如有不足，恳请批评指正。