Vue3使用高德地图的高能攻略，一步步教你如何轻松上手！

前端

2023-07-30 19:24:18

将高德地图无缝集成到 Vue3 应用

一、简介

高德地图是中国领先的地图服务提供商之一，提供丰富的地图功能和数据。将其集成到 Vue3 应用中可以显著增强用户的交互体验。本文将详细介绍如何实现高德地图与 Vue3 的无缝集成，包括地图搜索、地图选点和省市区三级联动。

二、安装和配置

安装高德地图 SDK ：从高德地图官网获取 API Key，然后通过 CDN 或 npm 安装 SDK。
创建 Vue3 项目 ：使用 Vue CLI 创建一个新的 Vue3 项目。
导入高德地图 SDK ：在 main.js 文件中导入高德地图 SDK 并配置 API Key。

三、创建地图组件

创建新的 Vue 组件（例如 Map.vue）来展示地图。组件将包含地图实例化、事件处理和其他与地图交互相关的逻辑。

四、在地图组件中实现功能

1. 地图搜索

添加搜索事件监听器。
调用地图搜索方法。
处理搜索结果。

2. 地图选点

添加选点事件监听器。
处理选点事件，获取选中的经纬度。

3. 省市区三级联动

获取省份列表。
省份选择事件监听器，加载城市列表。
城市选择事件监听器，加载区县列表。

代码示例：

<template>
  <div id="map"></div>
  <input type="text" v-model="searchText" placeholder="搜索地点">
</template>

<script>
import Map from './Map.vue';

export default {
  components: { Map },
  data() {
    return {
      searchText: '',
      selectedPoint: null,
      provinces: [],
      cities: [],
      districts: [],
      province: '',
      city: '',
      district: ''
    };
  },
  mounted() {
    this.$refs.map.init(this.center, this.zoom);
    this.$refs.map.on('search', (result) => {
      // 处理搜索结果
    });
    this.$refs.map.on('click', (e) => {
      this.selectedPoint = e.lnglat;
    });
    // 获取省份列表
    AMap.service('AMap.DistrictSearch', () => {
      const districtSearch = new AMap.DistrictSearch();

      districtSearch.setLevel('province');
      districtSearch.search('中国', (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.provinces = result.districts;
        }
      });
    });
    // 省份选择事件监听器
    this.$watch('province', (newValue) => {
      // 获取城市列表
      const citySearch = new AMap.DistrictSearch();

      citySearch.setLevel('city');
      citySearch.search(newValue, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.cities = result.districts;
        }
      });
    });
    // 城市选择事件监听器
    this.$watch('city', (newValue) => {
      // 获取区县列表
      const districtSearch = new AMap.DistrictSearch();

      districtSearch.setLevel('district');
      districtSearch.search(newValue, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.districts = result.districts;
        }
      });
    });
  }
};
</script>