1.先建个js文件
import AMapLoader from "@amap/amap-jsapi-loader";
const initMap = async (config) => {
return new Promise((resolve, reject) => {
AMapLoader.load({
key: "0650fbe85c708dc3388fe803d0e5d861",
// key: config.key,
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [],
Loca: {
// 是否加载 Loca， 缺省不加载
version: "2.0.0", // Loca 版本，缺省 1.3.2
},
}).then((AMap) => {
resolve(AMap)
}).catch(err => {
reject(err)
})
})
}
export default initMap
2. vue组件
<template><div class="box"><div :id="id" class="container" ref="container"></div></div>
</template><script>
import initMap from "../../utils/initMap";
export default {data() {return {id: "maps",mapsFlag: false,markerList: [],aMap: null,url1: require("../../assets/img/background_img/bg_nav.png"),url2: require("../../assets/img/background_img/bg_header.png")};},/* 必传idcenter*/props: {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}},watch: {flyingLineObj: {handler(newName, oldName) {setTimeout(() => {this.init();}, 1000);},deep: true}},methods: {async init() {let that = this;initMap().then(AMap => {this.aMap = new AMap.Map(this.id, {zoom: 5,viewMode: "3D",pitch: 48,center: this.center,mapStyle: this.mapStyle,dragEnable: this.dragEnable,zoomEnable: this.zoomEnable,doubleClickZoom: this.doubleClickZoom,keyboardEnable: this.keyboardEnable});// 创建 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 pointLayer = new Loca.PointLayer({zIndex: 10,opacity: 1,visible: true,blend: "lighter"});// 图层添加数据pointLayer.setSource(dataSource);// 设置样式pointLayer.setStyle({radius: 30,color: "red",borderWidth: 10,borderColor: "#fff",unit: "px"});// 添加到地图上loca.add(pointLayer);}).catch(e => {console.log(e);});}},components: {}
};
</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>
