vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

在现代网页应用中，地图服务是一个非常重要的功能，尤其是在需要地理位置和导航的情况下。高德地图是国内非常流行的一款地图服务，今天我们将通过Vue.js来实现一个简单的PC端高德地图应用，主要功能包括搜索定位、地址标记和弹窗显示定位详情。

环境准备

首先，确保你已经安装了Vue CLI，通过以下命令创建一个新的Vue项目：

vue create amap-demo
cd amap-demo

接着，你需要在 public/index.html 文件中引入高德地图的API脚本。你需要先在高德官网申请一个开发者API Key。

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY"></script>

将 "YOUR_AMAP_KEY" 替换成你的高德API Key。

组件结构

我们将创建一个名为 MapComponent.vue 的组件来实现地图的功能。在这个组件中，我们将初始化地图、进行定位、添加标记以及显示弹窗。

MapComponent.vue

<template>
  <div id="map" style="width: 100%; height: 600px;"></div>
  <div>
    <input v-model="searchAddress" placeholder="输入地址进行搜索" />
    <button @click="searchLocation">搜索</button>
  </div>
  <div v-if="infoWindowVisible" class="info-window">
    <p>地址: {{ selectedAddress }}</p>
    <p>经度: {{ selectedPosition.lng }}</p>
    <p>纬度: {{ selectedPosition.lat }}</p>
    <button @click="infoWindowVisible = false">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      searchAddress: '',
      marker: null,
      infoWindowVisible: false,
      selectedAddress: '',
      selectedPosition: {}
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        center: [116.397428, 39.90923], // 初始中心点
        zoom: 13 // 初始缩放级别
      });
    },
    searchLocation() {
      if (!this.searchAddress) return;

      const geocoder = new AMap.Geocoder({
        city: "全国" // 城市
      });

      geocoder.getLocation(this.searchAddress, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const lnglat = result.geocodes[0].location; // 获取经纬度
          this.setMarker(lnglat, this.searchAddress);
        } else {
          alert('未找到地址');
        }
      });
    },
    setMarker(lnglat, address) {
      if (this.marker) {
        this.marker.setMap(null); // 移除原来的标记
      }

      this.marker = new AMap.Marker({
        position: lnglat,
        title: address, // 提示信息
        map: this.map
      });

      this.map.setCenter(lnglat);
      this.marker.on('click', () => {
        this.selectedAddress = address;
        this.selectedPosition = lnglat;
        this.infoWindowVisible = true;
      });
    }
  }
};
</script>

<style scoped>
.info-window {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 10;
}
</style>

功能说明

1. 搜索定位：用户可以在输入框中输入地址，点击搜索按钮后，会通过高德地图的地理编码API将地址转换为经纬度，并在地图上标记出来。
2. 地址标记：当用户搜索的地址被找到后，我们会在地图上添加一个标记，并在点击标记时显示详细信息。
3. 弹窗显示定位详情：点击标记后，会弹出一个包含地址、经度和纬度的详细信息窗口，并提供一个关闭按钮。

运行项目

最后，你可以在项目目录下运行以下命令启动开发服务器：

npm run serve

打开浏览器访问 http://localhost:8080，就可以看到我们的高德地图搜索定位应用啦！

通过以上步骤，我们实现了一个基本的高德地图搜索和定位示例，当然，你可以在此基础上进行功能扩展和优化，如整合更多的地图功能和更好的人机交互体验。希望这对你有所帮助！