vue+antv L7实现高德地图自定义样式和自定义marker

jinxi1112

已于 2022-10-24 12:50:44 修改

阅读量3.1k

点赞数 1

分类专栏： Javascript 文章标签： 1024程序员节

于 2022-10-24 12:49:03 首次发布

本文链接：https://blog.csdn.net/jinxi1112/article/details/127490095

版权

Javascript 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

实现思路

1.在index.html中引入antv L7和高德地图

<script src="https://gw.alipayobjects.com/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="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css"/>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=高德地图的key&plugin=AMap.Autocomplete,AMap.PlaceSearch,Map3D"></script>
<script src="//webapi.amap.com/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", // 样式URL
                center: [],// 中心点的经纬度
                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);
        },