本文介绍: version: “2.0”, // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15。version: “2.0.0”, // Loca 版本,缺省 1.3.2。// 是否加载 Loca, 缺省不加载。
import AMapLoader from “@amap/amap–jsapi–loader“;
const initMap = async (config) => {
return new Promise((resolve, reject) => {
key: “0650fbe85c708dc3388fe803d0e5d861″,
version: “2.0”, // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
version: “2.0.0”, // Loca 版本,缺省 1.3.2
},
})
})
}
<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")
};
},
/* 必传
id
center
*/
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
},
// ctrl
keyboardEnable: {
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>
原文地址:https://blog.csdn.net/weixin_44042792/article/details/134732508
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_39008.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。