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

实现思路

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

2.绘制地图容器

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 = `

                        ${item.name}
                    
`
                new L7.Marker({
                    element: el,
                })
                    .setLnglat([item.lng, item.lat])
                    .addTo(scene);
            });
        },

5.绘制自定义弹窗

        addPopup(position, name) {
            // 自定义popup样式
            const start = `

                        ${name}
                    
`;
            new L7.Popup()
                .setLnglat(position)
                .setHTML(start)
                .addTo(this.scene);
        },