实现思路
1.在index.html中引入antv L7和高德地图
<script src="/os/antv/pkg/_antv.l7-1.3.0-beta.4/build/L7-min.js"></script>
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "",// 高德地图密匙};</script><link rel="stylesheet" href="/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css"/><script src="/maps?v=1.4.8&key=高德地图的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,Map3D"></script><script src="///ui/1.0/main.js?v=1.0.11"></script>
2.绘制地图容器
<div id="map" class="map"></div>
3.绘制地图
data() {return {scene: null, data:[{id: 1,name: '',lng: '',lat: '',}}... methods: { initMap() {const that = this;const scene = new L7.Scene({id: "map",mapStyle: "amap://styles/bdcd5fccbfefcce4c42fa231058d089d", // 样式URLcenter: [],// 中心点的经纬度pitch: 0,zoom: 4,zoomControl: false,scaleControl: false,});this.scene = scene;scene.on("loaded", function () {that.drawMarker(scene);});},
4.绘制marker
drawMarker(scene) {this.data.forEach((item, i) => {// 自定义marker样式let el = document.createElement("div");el.className = "marker-wrap";el.innerHTML = `<div class="marker"><span class="title">${item.name}</span></div>`new L7.Marker({element: el,}).setLnglat([item.lng, item.lat]).addTo(scene);});},
5.绘制自定义弹窗
addPopup(position, name) {// 自定义popup样式const start = `<div class="popup"><span class="title">${name}</span><div class="num-wrap inline">`;new L7.Popup().setLnglat(position).setHTML(start).addTo(this.scene);},
