vue引入高德地图定位+拖拽选址+搜索定位

接地图步骤：

准备工作
step1：安装依赖；cnpm install vue-amap --save 引入AMap
申请key：在高德地图开放平台https://lbs.amap.com/dev/key/app控制台-应用管理-我的应用-新增应用，申请一个key

1、 在index.html里引入

  <!--    引入高德,一定要在头部引入,因为高德需要预加载-->
  <script src="//webapi.amap.com/maps?v=1.4.13&key=3764a11b28b71df809bdb998a9bb6278"></script>
  <!--    高德地图ui组件-->
  <script src="//webapi.amap.com/ui/1.0/main.js"></script>
  
2、在vue cli2.0版本情况下
   在build文件夹下的webpack.base.config.js配置,写在"module.exports={}’'里最底下，与"entry{}"平级 
   
   在vue cli3.0版本情况下
   在vue.config.js配置,写在"module.exports={}“里配置
   configureWebpack: {
    externals: {
      'AMap': 'AMap',
      'AMapUI': 'AMapUI'
    }
  },
  
3、在assert文件夹里新建一个AMap.js：
export default function MapLoader () {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=3764a11b28b71df809bdb998a9bb6278 '
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

4、在使用了用地图的组件中引入AMap，
   import AMap from 'AMap'
   import MapLoader from '../../../assets/AMap.js';
   
5、地图vue代码：
  <template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
        <div style="height:600px;border:1px solid #dddddd;">
          <p style="background-color: #eff5ff;padding: 8px;color: #01AAED;font-size: 16px">经纬度设置,找到位置,点击确定即可</p>
          <div id="all" style="height:100%">
            <div class="posInput">
              <a-input-search style="width:100%"
                              id="tipinput"
                              class="form-control input-style"
                              type="text"
                              placeholder="请输入搜索地址"
                              v-model="MapAdress"
                              @search="inputMapAdress">
              </a-input-search>
            </div>
            <div id="allmap"></div>
            <div class="posSubmit">
              <a-input style="width:100%"
                       id="insureinput"
                       class="form-control input-style"
                       type="text"
                       v-model="insureAdress">
              </a-input>
            </div>
          </div>
        </div>

    </a-spin>
  </a-modal>
</template>

<script>

  import MapLoader from '../../../../assets/AMap.js';

  export default {
    name: 'demo',
    data() {
      return {
        title: "选择房源地址",
        visible: false,
        confirmLoading: false,
        map: null,
        thisPosition: {
          location: '',
          lng: '',
          lat: '',
          province: '',
          city: '',
          county: '',
          street: '',
          streetId: '',
        },
        MapAdress: '',
        insureAdress: '',
      }
    },
    methods: {
      openMap(addData) {
        this.visible = true;
        if (addData.lng && addData.lat) {
          console.log("按照经纬度渲染")
          this.mapinit(addData.lng, addData.lat)
        } else if (addData.addr) {
          console.log("按照详细地址渲染")
          this.maplocal(addData.addr)
        } else {
          this.currentSite();
        }
      },
      handleOk() {
        console.log(this.insureAdress);
        let that =  this;
        this.$confirm({
          title: '提示',
          content: '此操作为修改地址, 是否继续?',
          onOk() {
            that.$emit('ok', that.thisPosition);
            that.close();
          },
          onCancel() {
          },
        });

      },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      inputMapAdress(e) {
        console.log(e)
        this.MapAdress = e
      },

      mapMarker(longitute, latitude) { //指针
        let that = this
        //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
          var map = new AMap.Map('allmap', {
            zoom: 16
          })

          // 传入经纬度，设置地图中心点
          var position = new AMap.LngLat(longitute, latitude);  // 标准写法
          map.setCenter(position);

          var positionPicker = new PositionPicker({
            mode: 'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map: map//依赖地图对象
          });
          //TODO:事件绑定、结果处理等
          positionPicker.on('success', function (positionResult) {
            console.log("positionResult", positionResult);
            that.thisPosition.lng = positionResult.position.lng;
            that.thisPosition.lat = positionResult.position.lat;
            that.thisPosition.province = positionResult.regeocode.addressComponent.province;
            that.thisPosition.city = positionResult.regeocode.addressComponent.city;
            that.thisPosition.county = positionResult.regeocode.addressComponent.district;
            that.thisPosition.street = positionResult.regeocode.addressComponent.street;
            that.thisPosition.streetId = positionResult.regeocode.addressComponent.streetNumber;
            that.thisPosition.location = positionResult.address;
            that.insureAdress = positionResult.address;
          });
          positionPicker.on('fail', function (positionResult) {
            // 海上或海外无法获得地址信息
            console.log(`定位失败:` + positionResult)
          });
          positionPicker.start();
          map.panBy(0, 1);
        });
      },
      mapinit: function (longitute, latitude) { //经纬度定位
        console.log("经纬度", longitute, latitude)
        let that = this
        MapLoader().then(AMap => {
          var map = new AMap.Map("allmap", {
            center: [longitute, latitude],//需求的城市的经度和 纬度
            resizeEnable: true,
            zoom: 16
          })
          AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            var autoOptions = {
              city: "北京", //城市，默认全国
              input: "tipinput"//使用联想输入的input的id（也就是上边那个唯一的id）
            };
            var autocomplete = new AMap.Autocomplete(autoOptions);

            AMap.event.addListener(autocomplete, "select", function (e) {
              //TODO 针对选中的poi实现自己的功能
              console.log(e, e.poi.district, e.poi.address, e.poi.location.lng)
              that.thisPosition.lng = e.poi.location.lng
              that.thisPosition.lat = e.poi.location.lat
              that.insureAdress = e.poi.district + e.poi.address
              console.log(that.insureAdress)
              var map = new AMap.Map('allmap', {
                zoom: 16
              })
              var position = new AMap.LngLat(e.poi.location.lng, e.poi.location.lat);  // 标准写法
              map.setCenter(position);
              that.mapMarker(e.poi.location.lng, e.poi.location.lat)

            });
          });
          that.mapMarker(longitute, latitude)
        })

      },
      maplocal(address) { //地理逆编码
        let that = this
        MapLoader().then(AMap => {
          AMap.plugin(['AMap.Geocoder'], function () {
            let geocoder = new AMap.Geocoder();
            geocoder.getLocation(address, (status, result) => {
              console.log(address);
              if (status === 'complete' && result.geocodes.length) {
                console.log(result)
                const lnglat = result.geocodes[0].location;

                const lat = lnglat.lat;
                const lng = lnglat.lng;
                that.mapinit(lng, lat)    //tips：使用地理逆编码，此时解析出的经纬度位置也应逆换
              } else {
                console.log(result)
              }
            });
          })
        })
      },
      currentSite() { //当前位置
        let that = this;
        MapLoader().then(AMap => {
          AMap.plugin(['AMap.Geolocation'], function () {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 5000,          //超过5秒后停止定位，默认：5s
              buttonPosition: 'RB',    //定位按钮的停靠位置
              buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            geolocation.getCurrentPosition(function (status, result) {
              if (status == 'complete') {
                that.mapinit(result.position.lng, result.position.lat)
              } else {
                that.mapinit(116.397755, 39.903179)
              }
            })
          })
        })
      },

    },

  }
</script>

<style scoped>
  #all {
    position: relative;
  }

  #allmap {
    width: 100%;
    height: calc(100% - 30px);
    font-family: "微软雅黑";
    border: 1px solid pink;
  }

  .posInput {
    position: absolute;
    z-index: 1;
    width: 80%;
    margin-top: 20px;
    margin-left: 10%;
  }

  .posSubmit {
    position: absolute;
    z-index: 1;
    bottom: 56px;
    margin-left: 10%;
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>