vue 高德地图点击获取坐标与地理位置

<template>
  <div class="coordinate">
    <div class="toolbar">
      <div>坐标: [ {{ lng }} , {{ lat }} ]</div>
      <div>地址: {{ address }}</div>
    </div>
    <div style="width: 100%;height: 300px;">
      <div id="coordinateMap" class="coordinateMap" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapDialog',
  props: {},
  data() {
    return {
      overlays: [],
      lng: '',
      lat: '',
      address: '',
      marker: '',
      geocoder: null,
      mouseTool: null
    }
  },
  created() {},
  mounted() {
    localStorage.clear()
    this.MapInit()
  },
  methods: {
    MapInit() {
      const that = this
      that.map = new AMap.Map('coordinateMap', {
        center: [113.274041, 23.141222],
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 13,
        zooms: [3, 21]
      })
      that.drawBounds(that.map)
      // 异步同时加载多个插件
      AMap.plugin(['AMap.Scale'], function() {
        that.scale = new AMap.Scale()
        that.map.addControl(that.scale)
      })
      that.mouseTool = new AMap.MouseTool(that.map)
      // 监听draw事件可获取画好的覆盖物
      that.mouseTool.on('draw', function(e) {
        that.overlays.push(e.obj)
        that.mouseTool.close()
      })

      that.geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all'
      })
      that.marker = new AMap.Marker()
      // 点击获取坐标
      const clickHandler = function(e) {
        that.lng = e.lnglat.getLng()
        that.lat = e.lnglat.getLat()
        const lnglat = [that.lng, that.lat]
        that.map.add(that.marker)
        that.marker.setPosition(lnglat)
        that.getAddress(that.lng, that.lat)
      }
      that.map.on('click', clickHandler)
    },
    // 获取地址
    getAddress(lng, lat) {
      const that = this
      that.geocoder.getAddress([lng, lat], function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            that.address = result.regeocode.formattedAddress
            that.$nextTick()
          }
        }
      })
    },
    // 限制地图区域
    drawBounds(map) {
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      const district = new AMap.DistrictSearch(opts)
      district.setLevel('广州市')
      district.search('广州市', (status, result) => {
        const outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ]
        const holes = result.districtList[0].boundaries

        const pathArray = [outer]
        pathArray.push.apply(pathArray, holes)
        const polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#001826',
          strokeWeight: 1,
          strokeOpacity: 0.5,
          fillColor: '#ffffff',
          fillOpacity: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 2, 10]
        })
        polygon.setPath(pathArray)
        map.add(polygon)
      })
    },
    // 限制地图区域END
    close() {
      this.mouseTool.close(true)
    },
  }
}
</script>

<style lang="scss" scoped>
.coordinate {
  width: 100%;
  height: 100%;
  .coordinateMap {
    width: 100%;
    height: 100%;
  }
}
</style>