在vue中使用高德地图的拖拽选址

在webpack.base.conf.js中找到module.exports对象。添加externals: { 'AMap': 'AMap' }代码。

2. index.html引入高德js

在index.html页面加入<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的K值"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

3. 在页面中引入高德js

在vue文件中import进来。import AMap from 'AMap'; //在页面中引入高德地图

4.data中的数据：

data () {
    return {
      lng: '',
      lat: '',
      address: '',
      initEdit: false,
      lngLat: '',
      fullAdress: '天津市西青区', // 可填写默认地址，下边填写默认的坐标
      district: '',
      province: ''
    }
  }

5.methods绘制地图代码：

  initMap () {
      this.fullAdress = '天津市西青区'
      this.initEdit = false
      let AMapUI = window.AMapUI
      let that = this
      AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
        var map = new AMap.Map('container', {
          resizeEnable: true,
          scrollWheel: true,
          zoom: 13
        })
        AMap.plugin(['AMap.ToolBar'], function () {
          map.addControl(new AMap.ToolBar({
            liteStyle: true
          }))
        })
        var positionPicker = new PositionPicker({
          mode: 'dragMap',
          map: map
        })
        positionPicker.on('success', function (positionResult) {
          if (this.initEdit === false) {
            let geocode = positionResult.regeocode
            that.lngLat = positionResult.position.getLng() + ' , ' + positionResult.position.getLat()
            that.fullAdress = positionResult.address
            this.address = {
              lng: positionResult.position.getLng(),
              lat: positionResult.position.getLat(),
              sheng: geocode.addressComponent.province,
              shi: geocode.addressComponent.city,
              qu: geocode.addressComponent.district,
              jiedao: geocode.addressComponent.township,
              menpaihao: geocode.addressComponent.streetNumber,
              dizhiquanming: positionResult.address
            }
            if (geocode.addressComponent.province === '北京市') {
              this.address.shi = '北京市'
            }
            if (geocode.addressComponent.province === '天津市') {
              this.address.shi = '天津市'
            }
            if (geocode.addressComponent.province === '上海市') {
              this.address.shi = '上海市'
            }
            if (geocode.addressComponent.province === '重庆市') {
              this.address.shi = '重庆市'
            }
          }
          this.initEdit = false
        })
        positionPicker.on('fail', function (positionResult) {
          // 海上或海外无法获得地址信息
          that.lngLat = ''
          that.fullAdress = ''
        })
        if (that.lng === '' || that.lat === '') {
          that.lngLat = new AMap.LngLat('经度', '纬度') // 默认的经纬度
        } else {
          that.lngLat = new AMap.LngLat(that.lng, that.lat)
        }
        console.log(that.lngLat)
        positionPicker.start(that.lngLat)
      })
    }

6、最后加载一下：
根据自己需求加载出来

mounted () {
    this.initMap ()
  }

---

版权声明：本文为博主原创文章，转载请附上博文链接！