焕焕写的--高德地图导入

这个是vue.js   iview里面的form表单

<FormItem>关键字 <input id="tipinput"/></FormItem>
 <FormItem>
    <input id="tipinput"/></FormItem>//这个input必须跟js里面那个一致，不然没有效果
    <span>详细地址{{ mapAddressInfo }}</span>
</FormItem>

我怕这个高的地图可以有关键字模糊查询提示，然后还有点击地图查询详细地址
这里面有导入高德地图的方法 可以参考这个 https://www.jianshu.com/p/6f9ce597167b
我也说一下----   在你的文件webpack.config.js 加上 
 externals: {
    'AMap': 'AMap'
  },

index.html里面引入 
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>
在你想要引入的文件script里面引入一下import AMap from 'AMap'
然后在method里面写个初始化方法

在data的 return里面先绑定几个值 

      longitude: '',
      latitude: '',
      mapAddressName: '',
      mapAddressInfo: '',


init: function () {
      let that = this;
      let map = new AMap.Map('map_container', {
        // center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10,
        lang: 'zh'
      })
      var placeSearch, placeSearch2;
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () { // 异步同时加载多个插件
        // 输入提示
        var autoOptions = {
          input: 'tipinput' // 刚才说的就是这个input，跟上面的要一一致
        };
        var auto = new AMap.Autocomplete(autoOptions);
        placeSearch = new AMap.PlaceSearch({
          map: map
        }); // 构造地点查询类

        placeSearch2 = new AMap.PlaceSearch({
          pageSize: 1,
          extensions: 'all',
          showCover: false,
          autoFitView: false,
          type: '公司企业|政府机构及社会团体|汽车服务|汽车销售|汽车维修|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|科教文化服务|交通设施服务|金融保险服务'
        });
        AMap.event.addListener(auto, 'select', function (e) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); // 关键字查询
        }); // 注册监听，当选中某条记录时会触发
        AMap.event.addListener(placeSearch, 'markerClick', function(e) {
          that.longitude = e.data.location.lng;
          that.latitude = e.data.location.lat;
          that.mapAddressName = e.data.name;
          that.mapAddressInfo = e.data.pname + e.data.cityname + e.data.adname + e.data.address;
          console.log(placeSearch,e.data.pname , e.data.cityname , e.data.adname , e.data.address)
        });
      });
      var geocoder;
      AMap.plugin('AMap.Geocoder', function () {
        geocoder = new AMap.Geocoder();
      });
      map.on('click', function (e) {
        var cpoint = [e.lnglat.lng, e.lnglat.lat]; // 中心点坐标
        placeSearch2.searchNearBy('', cpoint, 200, function (status, result) {
          if (status === 'complete' && result.poiList) {
            let addr = result.poiList.pois[0];
            that.longitude = addr.location.lng;
            that.latitude = addr.location.lat;
            that.mapAddressName = addr.name;
            that.mapAddressInfo = addr.pname + addr.cityname + addr.adname + addr.address;
          } else {
            that.$Message.error(this.$t('ATTENDANCE_MODULE.ERR.err4'));
          }
        });
      });
    },