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

前端路上迷茫的小鲨鱼

已于 2024-02-01 18:08:36 修改

阅读量1.3k

点赞数 1

分类专栏： vue 地图文章标签： vue.js 前端

于 2023-03-28 18:21:10 首次发布

本文链接：https://blog.csdn.net/guoyu1_/article/details/129821744

版权

vue 同时被 2 个专栏收录

95 篇文章 0 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue.js应用中创建一个输入框组件，用户可以输入地址进行搜索。通过高德地图API，实现点击地图获取经纬度，以及根据地址反编码获取地理位置信息。同时，文章还包含了初始化地图、设置标记和调整视图等操作。

摘要由CSDN通过智能技术生成

<el-input
  v-model.trim="searchLocation"
  placeholder="请输入地址搜索"
  maxlength="30"
  clearable
  @blur="getLocation"
  @keyup.enter.native="getLocation"
/>
<div id="container" />

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('根据地址查询位置失败')
      }
    })
  },
}