vue 高德地图初始化

首先引入高德地图,这里需要申请自己的ak

    <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=your key&plugin=AMap.Geocoder,AMap.RangingTool,AMap.Heatmap,AMap.DistrictSearch,AMap.service"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

在 Vue.js 项目中初始化高德地图，可以通过以下步骤进行：

首先，需要在项目中引入高德地图的 JS API。可以在 HTML 文件的头部使用 <script> 标签引入，或者在 Vue 组件中使用 import 语句引入。
创建一个 Vue 组件，用于封装地图的初始化和销毁逻辑。在这个组件的 mounted 生命周期钩子中，使用高德地图的 new AMap.Map() 方法创建一个新的地图实例。在 beforeDestroy 生命周期钩子中，使用地图实例的 destroy 方法销毁地图。
在需要使用地图的地方，使用这个 Vue 组件。可以通过 props 传递地图的配置选项，例如中心点坐标、缩放级别等。

以下是一个简单的示例代码：

<template>
  <div ref="mapContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = new AMap.Map(this.$refs.mapContainer, {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  }
};
</script>

在这个示例中，AMap.Map 的构造函数接收两个参数：一个是地图容器的 DOM 元素，另一个是地图的配置选项。地图容器是通过 Vue 的 ref 特性获取的。地图的配置选项是一个对象，可以包含各种配置，例如 zoom 设置地图的缩放级别，center 设置地图的中心点坐标等。