vue中使用高德地图——加载高德地图几种方法

在Vue中使用高德地图，可以通过以下几种方法实现：

1. 使用高德地图的JavaScript API SDK。
2. 使用Vue插件，如vue-amap。

以下是使用高德地图JavaScript API SDK的示例代码：

首先，在你的Vue项目中的index.html或public/index.html中引入高德地图的JavaScript API：

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

替换YOUR_AMAP_KEY为你的高德地图API Key。

然后，在Vue组件中创建地图实例：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'MapComponent',
  mounted() {
    // 创建地图实例
    this.map = new AMap.Map('map', {
      zoom: 10, // 缩放级别
      center: [116.397428, 39.90923] // 中心点坐标
    });
  },
  data() {
    return {
      map: null
    };
  }
};
</script>

如果你想使用Vue插件，可以安装vue-amap：

npm install vue-amap

然后在Vue项目中进行配置：

// main.js 或者其他的初始化文件
import Vue from 'vue';
import VueAMap from 'vue-amap';
 
Vue.use(VueAMap);
 
VueAMap.initAMapApiLoader({
  key: 'YOUR_AMAP_KEY',
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
    'AMap.Geolocation'
  ],
  v: '1.4.15'
});

在Vue组件中使用高德地图：

<template>
  <el-amap class="map" :vid="'amap'" :zoom="10"></el-amap>
</template>
 
<script>
export default {
  name: 'MapComponent',
  data() {
    return {
      center: [116.397428, 39.90923]
    };
  }
};
</script>
 
<style>
.map {
  width: 500px;
  height: 400px;
}
</style>

以上两种方法均可以在Vue项目中加载高德地图，你可以根据项目需求和个人喜好选择合适的方法。