1.先建个js文件

import AMapLoader from "@amap/amap-jsapi-loader";

2.文件中代码

const initMap = async (config) => {return new Promise((resolve, reject) => {AMapLoader.load({key: "0650fbe85c708dc3388fe803d0e5d861",// key: config.key,version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [],Loca: {// 是否加载 Loca， 缺省不加载version: "2.0.0", // Loca 版本，缺省 1.3.2},}).then((AMap) => {resolve(AMap)}).catch(err => {reject(err)})})}export default initMap

3. vue组件

<template><div class="box" :style="{ height: height, width: width }"><div :id="id" class="container" ref="container"></div></div>
</template><script>
import initMap from "../../utils/initMap";
export default {data() {return {markerList: [],aMap: null,url1: require("../../assets/img/background_img/bg_nav.png"),url2: require("../../assets/img/background_img/bg_header.png")};},/* 必传idcenter*/props: {id: {type: String,default: "map"},// 宽width: {type: String,default: "100%"},// 高height: {type: String,default: "100%"},//地图显示的缩放级别zoom: {type: Number,default: 5.29},viewMode: {type: String,default: "3D"},// 地图的倾角，0-83pitch: {type: Number,default: 48},center: {type: Array,default: () => []},mapStyle: {type: String,// default: "amap://styles/ebfa0ae6f5c3e8c2f7c1b31f3912c232",default: "amap://styles/835378d49c95f3bb1522a957afdad78c"},// 拖拽dragEnable: {type: Boolean,default: false},// 缩放zoomEnable: {type: Boolean,default: false},// 双击变大doubleClickZoom: {type: Boolean,default: false},// ctrlkeyboardEnable: {type: Boolean,default: false},circularList: {type: Array,default: () => []},lineList: {type: Array,default: () => []},// 散点图scatterMap: {type: Boolean,default: false},// 热力图heatMap: {type: Boolean,default: false},heatDate: {type: Object,default: () => {}},flyingLineObj: {type: Object,default: () => {}},breathObj: {type: Object,default: () => {}},// 飞线颜色flyingLineColors: {type: Array,// default: () => ["#8d48e3", "#dd79ff"],default: () => ["#dd79ff", "#d764fe", "#8d48e3"]},maxHeightScale: {type: Number,default: 0.3},// 飞点颜色headColor: {type: String,default: "rgba(255, 255, 0, 1)"},trailColor: {type: String,default: "rgba(255, 255,0,0)"}},watch: {flyingLineObj: {handler(newName, oldName) {setTimeout(() => {this.init();}, 1000);},deep: true}},methods: {async init() {if (this.aMap) {this.aMap.destroy();this.aMap = null;}let that = this;initMap().then(AMap => {this.aMap = new AMap.Map(this.id, {zoom: this.zoom,viewMode: this.viewMode,pitch: this.pitch,center: this.center,mapStyle: this.mapStyle,dragEnable: this.dragEnable,zoomEnable: this.zoomEnable,doubleClickZoom: this.doubleClickZoom,keyboardEnable: this.keyboardEnable// layers:[disCountry],});// 创建 Loca 实例var loca = new Loca.Container({map: this.aMap});// 数据let events = [{type: "Feature",properties: {},geometry: {type: "Point",coordinates: [lon, lat]}},{type: "Feature",properties: {},geometry: {type: "Point",coordinates: [lon, lat]}},{type: "Feature",properties: {},geometry: {type: "Point",coordinates: [lon, lat]}}];// 图层的数据源var dataSource = new Loca.GeoJSONSource({data: {type: "FeatureCollection",features: events}});// 图标图层var layer = new Loca.IconLayer({zIndex: 10,opacity: 1,visible: false});layer.setSource(dataSource);layer.setStyle({unit: "px",iconSize: [30, 44],icon: (index, feature) => {console.log("feature", feature);let url = "";if (feature.flag == 1) {url = require("../../assets/img/icons/map_icon3.png");} else if (feature.flag == 3) {url = require("../../assets/img/icons/map_icon2.png");} else if (feature.flag == 5) {url = require("../../assets/img/icons/menci_map_2.png");} else {url = require("../../assets/img/icons/map_icon1.png");}return url;},offset: [0, -40],rotation: 0});loca.add(layer);// 添加图层， 千万不能忘this.aMap.on("complete", function() {setTimeout(function() {layer.show();layer.addAnimate({key: "offset",value: [0, 1],easing: "Linear",transform: 500,random: true,delay: 9000});layer.addAnimate({key: "iconSize",value: [0, 1],easing: "Linear",transform: 500,random: true,delay: 9000});}, 800);});loca.animate.start();// 拾取测试this.aMap.on("click", e => {});// 打开图层调试工具var dat = new Loca.Dat();dat.addLayer(layer);}).catch(e => {console.log(e);});},},components: {},beforeDestroy() {// 销毁地图this.aMap.destroy();this.aMap = null;}
};
</script><style scoped>
.box {width: 100%;height: 1000px;border-radius: 12px;background: rgb(8, 34, 97);
}
.container {width: 100%;height: 100%;background: rgb(8, 34, 97);
}
::v-deep .amap-logo {display: none;opacity: 0 !important;
}
::v-deep .amap-copyright {opacity: 0;
}
</style>