vue 使用插件高德地图--vue-amap

 第一步：安装 vue-amap
查看 官网 获取高德地图实例 | @vuemap/vue-amap

npm install vue-amap

第二步：在你的 Vue 项目中注册 vue-amap：

// main.js
import Vue from 'vue';
import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
    // 高德开发者平台申请key值
    key: 'cc9c098d8c07c8fbaed05cc8cca2c71c',
    // plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar' ,'AMap.mapStyle', 'AMap.PolyEditor', 'AMap.CircleEditor'],
    // 默认高德 sdk 版本为 1.4.4
    // v: '2.0.0',
    // theme: 'blue',
    // mapStyle: 'amap://styles/dark', // 替换为你自己的样式ID
});

第三步：隐藏logo 在app.vue样式中

.amap-logo {

  display: none !important;

}

 第四步：在你的组件中使用地图点标记里面包含了点击事件

展示形式