Vue简单调用高德地图API，轻松标注点位取经纬度！

前端

2022-11-03 17:55:14

用 Vue 和高德地图 API 打造交互式地图应用

1. 初始化 Vue 和高德地图

为了使用高德地图 API，你需要在项目中安装 Vue.js 和高德地图 JS API。创建一个新的 Vue 项目，并通过 CDN 或 NPM 添加高德地图 JS API。

2. 标记点：在地图上留下印记

使用高德地图 API，你可以在地图上添加自定义标记点，提供位置相关信息。这些标记点可以显示名称、地址、图片等信息，让你在地图上清楚地标识重要地点。

3. 经纬度：获取位置的关键

经纬度是地理位置的关键信息。高德地图 API 提供便捷的接口，用于获取标记点的经纬度。获取经纬度后，你可以将它们存储起来，以便后续使用。

4. 详细地址：让标记点更有意义

仅仅知道经纬度是不够的。详细的地址信息可以让你在标记点中包含更有意义的内容。高德地图 API 提供了地址解析功能，可以将经纬度转换为详细的地址。

5. 搜索关键词：开启探索之旅

通过高德地图 API，你可以实现搜索关键词的功能。用户可以在搜索框中输入关键词，地图将自动给出相关地点列表。这样，用户就可以快速找到他们想要寻找的地点。

6. 下拉提示：指引用户快速搜索

为了改善搜索体验，你可以添加下拉提示功能。当用户在搜索框中输入关键词时，地图会自动给出相关地点的提示。这可以帮助用户快速找到他们想要寻找的地点，无需输入完整的关键词。

7. 示例代码：一步一步走向成功

import Vue from 'vue';
import { AMap } from 'vue-amap';

Vue.use(AMap);

new Vue({
  el: '#app',
  data() {
    return {
      mapInstance: null,
      markers: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.mapInstance = new AMap.Map('map', {
        center: [121.508875, 31.238861],
        zoom: 11,
      });

      this.addMarkers();
    },
    addMarkers() {
      this.markers.push(
        new AMap.Marker({
          position: [121.508875, 31.238861],
          title: '上海东方明珠塔',
        })
      );

      this.markers.forEach((marker) => {
        this.mapInstance.add(marker);
      });
    },
  },
});