vue集成高德地图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、怎么使用vue集成高德地图

在Vue项目中集成高德地图，你需要遵循以下步骤：

二、使用步骤

1.安装高德地图SDK：

在你的Vue项目中，你可以通过CDN方式直接引入高德地图的JS SDK，或者使用npm/yarn来安装。

<!-- 在public/index.html中添加 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script>

2.使用npm安装

npm install @amap/amap-jsapi --save

3.在Vue组件中引入高德地图：

如果你使用CDN方式，可以直接在组件中使用AMap。如果使用npm安装，需要在组件中引入：

// 使用npm安装的方式
import AMapLoader from '@amap/amap-jsapi';

 4.添加地图容器：

在你的Vue组件的模板中，添加一个用于显示地图的容器。

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

  5.创建地图实例：

在Vue组件的mounted生命周期钩子中，创建地图实例。

export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      try {
        // 如果使用npm安装的方式
        const AMap = await AMapLoader.load({
          key: '你的高德地图key',
          version: '2.0', // 高德地图SDK版本号
          plugins: ['AMap.Marker', 'AMap.Geolocation'], // 按需加载的插件列表
        });
        this.map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          center: [116.397428, 39.90923], // 地图中心点
          zoom: 13 // 地图显示的缩放级别
        });
      } catch (e) {
        console.error(e);
      }
    }
  }
};

   6.清理资源：

在Vue组件的mounted生命周期钩子中，创建地图实例。

beforeDestroy() {
  if (this.map) {
    this.map.destroy();
  }
}

---

总结

以上就是今天要讲的内容，通过以上步骤就可以使用vue集成高德地图了