vue2使用高德地图点击或搜索获取经纬度

data() {
  return {
    searchLocation: '',
    ruleForm: {},
    map: null,
    marker: null
  }
},

mounted() {
  this.initMap()
  this.setLocal()
},
methods: {
  // 初始化地图
  initMap() {
    this.map = new AMap.Map('container', {
      zoom: 9, // 级别
      center: [116.397428, 39.90923] // 中心点坐标
      // viewMode: "3D", // 使用3D视图
    })
    this.marker = new AMap.Marker()
    this.map.on('click', this.clickMap)  // 地图是否允许点击
  },
  setLocal(longitude, latitude) {
    if (this.marker) {
      this.marker.setMap(null)
    }
    if (!longitude) {
      this.map.setCenter([116.397428, 39.90923])
      return
    }
    this.map.setCenter([longitude, latitude])
    if (longitude) {
      const lnglat = new AMap.LngLat(longitude, latitude)
      this.marker.setPosition(lnglat)
      this.marker.setMap(this.map)
      this.map.setFitView(this.marker)
    }
  },
  clickMap(e) {
    this.searchLocation = ''
    this.ruleForm.longitude = e.lnglat.lng
    this.ruleForm.latitude = e.lnglat.lat
    this.$set(this.ruleForm, 'coordinate', e.lnglat.lng + ',' + e.lnglat.lat)
    this.marker.setPosition(e.lnglat)
    this.map.add(this.marker)
    this.map.setFitView(this.marker)
  },
  getLocation() {
    const geocoder = new AMap.Geocoder({
      city: '全国' // 城市设为北京，默认：“全国”
    })
    geocoder.getLocation(this.searchLocation, (status, result) => {
      if (status === 'complete' && result.geocodes.length) {
        const lnglat = result.geocodes[0].location
        this.$set(this.ruleForm, 'longitude', result.geocodes[0].location.lng)
        this.$set(this.ruleForm, 'latitude', result.geocodes[0].location.lat)
        this.$set(this.ruleForm, 'coordinate', result.geocodes[0].location.lng + ',' + result.geocodes[0].location.lat)
        this.marker.setPosition(lnglat)
        this.map.add(this.marker)
        this.map.setFitView(this.marker)
      } else {
        console.error('根据地址查询位置失败')
      }
    })
  },
}