效果图：
这是高德地图API文档地址：地图的创建-生命周期-示例中心-JS API 示例 | 高德地图API
1.安装
vue-amap安装
2.main.js中的配置
key申请地址教程：准备-入门-教程-地图 JS API | 高德地图API
1.// 高德离线地图 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ // 高德key key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的 // 插件集合 （插件按需引入） plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'], v: '1.4.15', // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了 uiVersion: '1.0.11' // ui版本号，也是需要写 })
3.页面中使用
1.<div id="mapChart" :style="{ width: '70vh', height: '70vh' }"></div> // 地图配置项 initmapFn() { var _this = this; // 创建地图，同时给地图设置中心点、级别、显示模式、自定义样式等属性 _this.map1 = new AMap.Map("mapChart", { resizeEnable: true, //是否监控地图容器尺寸变化 zoom: 3, // 缩放级别 center: [113.3245904, 23.1066805], //中心点坐标 }); //插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件，第一个参数是插件名,第二个是在plugin回调之后使用插件功能。 AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function () { _this.map1.addControl(new AMap.ToolBar()); _this.map1.addControl(new AMap.Scale()); _this.map1.addControl(new AMap.OverView({ isOpen: true })); }); _this.map1.clearMap();// 清除所有的覆盖物信息 // 创建 infoWindow 实例 // _this.map1.setFitView(); }, // 地图标注 onMarkerMap(data) { if (data[0]) { data.forEach((element, index) => { if (element.lng) { let marker = new AMap.Marker({ //在回调函数里面创建Marker实例,添加经纬度和标题 position: new AMap.LngLat(element.lng, element.lat), //添加经纬度 offset: new AMap.Pixel(-13, -30), // 偏移量 // title: "广州塔", // 鼠标移上去时显示的内容 // 可以自定义标记点显示的内容,允许插入html字符串 // content: "<h1>广州塔Content</h1>", }); this.map1.add(marker); // 将创建的点标记添加到已有的地图实例： //marker.setMap(this.map1); //名称 marker.setLabel({// 设置label标签 offset: new AMap.Pixel(-50, -30), //设置文本标注偏移量 content: `<div class="info">${element.enterpriseName}</div>`, //设置文本标注内容 direction: "right", //设置文本标注方位 }); } }); } }
