vue-amap在vue中引入方式

1.安装 vue-amap 插件。你可以通过在终端中运行以下命令来安装：

npm install vue-amap --save

2.在main.js文件中引入 vue-amap 并初始化高德地图：

import Vue from 'vue';
import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '你的高德地图API Key',
  plugin: [
    'AMap.Geolocation',
    'AMap.Autocomplete',
    'AMap.PlaceSearch'
  ],
  // 高德 SDK 版本，默认为 1.4.15
  v: '1.4.15'
});

3.在Vue组件中使用高德地图。例如，在一个名为Map.vue的组件中，可以添加如下代码：

<template>
  <div>
    <el-amap 
      :zoom="10"
      :center="centerPoint"
      class="map-container"
      ref="amap">
      <el-amap-marker 
        :position="markerPosition" 
        @click="handleMarkerClick">
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerPoint: [116.397428, 39.90923],
      markerPosition: [116.397428, 39.90923]
    };
  },
  methods: {
    handleMarkerClick(e) {
      console.log('Marker clicked', e);
    }
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style>

在需要显示地图的页面中引入并使用Map组件：

<template>
  <div>
    <h1>高德地图示例</h1>
    <Map />
  </div>
</template>

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

export default {
  name: 'MapPage',
  components: {
    Map
  }
};
</script>