Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能

在使用 Vue2 和 vue-amap 进行高德地图应用开发时，我们可以通过高德地图的 API 获取地理位置的坐标与地址信息，同时实现地图的搜索功能。本文将详细介绍如何在 Vue2 项目中集成高德地图，并实现坐标与地址信息的获取以及简单的搜索功能。

一、环境准备

1. 创建 Vue 项目：如果还没有创建 Vue2 项目，可以使用 Vue CLI 创建一个新的项目：

bash vue init webpack my-project cd my-project npm install

1. 安装 vue-amap：

bash npm install vue-amap --save

1. 获取高德地图 API Key：去高德开放平台申请一个 API Key，后续会用到。

二、项目配置

在 main.js 中引入 vue-amap 并进行配置：

import Vue from 'vue';
import App from './App.vue';
import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'YOUR_AMAP_API_KEY', // 替换成你的高德 API Key
  plugin: ['AMap.Geocoder', 'AMap.PlaceSearch'], // 引入需要的插件
});

new Vue({
  render: h => h(App),
}).$mount('#app');

三、组件实现

创建一个新的 Vue 组件 MapComponent.vue：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null,
      geocoder: null,
    };
  },
  mounted() {
    this.initializeMap();
  },
  methods: {
    initializeMap() {
      this.map = new AMap.Map('map', {
        center: [116.397428, 39.90923], // 初始坐标
        zoom: 13,
      });

      this.marker = new AMap.Marker({
        position: this.map.getCenter(),
      });
      this.marker.setMap(this.map);

      this.geocoder = new AMap.Geocoder();
      this.map.on('click', this.getCoordinates);
    },

    getCoordinates(e) {
      const lnglat = e.lnglat;
      this.marker.setPosition(lnglat);

      // 逆地理编码
      this.geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          alert('地址: ' + result.regeocode.formattedAddress);
        } else {
          alert('未找到地址');
        }
      });
    },

    searchPlace(query) {
      const placeSearch = new AMap.PlaceSearch({
        city: '北京', // 搜索城市
      });

      placeSearch.search(query, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const firstResult = result.poiList.pois[0];
          if (firstResult) {
            this.map.setCenter(firstResult.location);
            this.marker.setPosition(firstResult.location);
            alert('搜索到的地址: ' + firstResult.name);
          } else {
            alert('未找到相关地点');
          }
        } else {
          alert('搜索失败');
        }
      });
    },
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>

四、使用示例

在 App.vue 中使用 MapComponent 组件，并添加一个简单的搜索功能：

<template>
  <div id="app">
    <input type="text" v-model="searchQuery" placeholder="搜索地点" />
    <button @click="search">搜索</button>
    <MapComponent ref="mapComponent" />
  </div>
</template>

<script>
import MapComponent from './components/MapComponent.vue';

export default {
  components: {
    MapComponent,
  },
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    search() {
      this.$refs.mapComponent.searchPlace(this.searchQuery);
    },
  },
};
</script>

总结

通过以上方法，我们成功在 Vue2 项目中集成了高德地图，并实现了点击地图获取坐标和地址信息的功能，以及通过搜索框进行地点搜索的功能。你可以根据需求扩展更多功能，如标记多个地点、路径规划等。希望本文对你有所帮助！