先来完成后的效果图
首先安装 ：npm i @amap/amap-jsapi-loader --save
在使用地图的页面 引入：import AMapLoader from ‘@amap/amap-jsapi-loader’;
处理单标记：
import AMapLoader from '@amap/amap-jsapi-loader';export default {data() {return {map: null,}},mounted() {this.initMap();},methods: {// 初始化地图initMap() {AMapLoader.load({key: "XXXX", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0",// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", { //设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 18, //初始化地图级别center: [113.932497, 22.540517], //初始化地图中心点位置});var marker = new AMap.Marker({position: new AMap.LngLat(113.932497,22.540517), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="my_marker"><div class="showLog">SOS </div><div class="marker"><div class="title"><img src="/images/jkGv.png" alt=""></div></div></div>`,// icon: '//05/27/XeLFGn.png', // 添加 Icon 图标 URLoffset: new AMap.Pixel(-15, -20),});// var circle = new AMap.Circle({// center: new AMap.LngLat("113.934497", "22.540517"), // 圆心位置// radius: 10, //半径// strokeColor: "#1aec1a", //线颜色// strokeOpacity: 1, //线透明度// strokeWeight: 1, //线粗细度// fillColor: "#1aec1a", //填充颜色// fillOpacity: 0.35 //填充透明度// });// 将创建的点标记添加到已有的地图实例：this.map.add([marker]);}).catch(e => {console.log(e);})},}}
处理多标记：
// 初始化地图initMap() {let arr = [[117.517694,32.414674],[111.145623,27.583686],[113.474725,30.692175]];AMapLoader.load({key: "xxxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", { //设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 5, //初始化地图级别center: [112.886125, 28.130778],//初始化地图中心点位置});// 循环所有的标记点for( let i =0; i < arr.length; i++) {var marker = new AMap.Marker({position: arr[i],// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]map:this.map,content: `<div class="my_marker"><div class="marker">${this.winBox}所</div></div>`,offset: new AMap.Pixel(-15, -20),});// 将创建的点标记添加到已有的地图实例：this.map.add([marker]);}//矩形// var circle = new AMap.Circle({// center: new AMap.LngLat("113.934497", "22.540517"), // 圆心位置// radius: 10, //半径// strokeColor: "#1aec1a", //线颜色// strokeOpacity: 1, //线透明度// strokeWeight: 1, //线粗细度// fillColor: "#1aec1a", //填充颜色// fillOpacity: 0.35 //填充透明度// });}).catch(e => {console.log(e);})},
