vue中使用高德地图实现懒加载标记点覆盖物

jieyucx

已于 2023-06-05 10:57:04 修改

阅读量1.2k

点赞数 2

分类专栏： vue的那些事高德地图文章标签： vue.js javascript ecmascript

于 2023-05-25 11:15:43 首次发布

本文链接：https://blog.csdn.net/jieyucx/article/details/130862268

版权

vue的那些事同时被 2 个专栏收录

53 篇文章 5 订阅

订阅专栏

高德地图

11 篇文章 1 订阅

订阅专栏

一、什么是地图懒加载标记点

地图懒加载标记点是一种技术，用于在保证网页加载速度的前提下，实现地图标记点的渲染和呈现。通常地图标记点会在元素加载完毕后立刻渲染出来，如果标记点过多或者标记点所在的地图数据包过大，则会导致网页加载速度缓慢。而通过地图懒加载标记点技术，可以让标记点在用户需要查看地图时再被渲染，以减少页面加载时间和提高页面性能。该技术通过前端JavaScript控制地图事件和数据，使得只有当标记点所在的地图区域被用户浏览时，标记点才被渲染出来。同时，标记点也可以通过异步加载的方式，在不影响用户浏览体验的情况下逐步呈现，从而提高整个页面的响应速度

巴拉巴拉巴拉巴拉。。。。。。。。。
用人话说就是，随着我们用户能看到的地图的可视区域动态添加覆盖物标记点，而不是一次性把所有标记点都添加到地图上，不管我们看不看他都已经加载了。
这样的话数据少点还好，数据一多就会造成页面卡顿，严重的直接崩溃了。

大致效果：
在这里插入图片描述

额，只有两个截图看不出啥效果，意思一下 狗头.jpg

不多比比了，开始正文吧

二、如何实现懒加载

主要思路如下

监听地图移动事件

this.map.on("moveend", this.lazyLoadMarkers);

获取地图的可视区域，根据可见区域范围判断哪些覆盖物需要展示

lazyLoadMarkers() {
           // 获取地图可视区域范围
           let bounds = this.map.getBounds();
           console.log('地图可视区域范围', bounds)
           // 遍历覆盖物数组，判断是否需要展示
           for (let i = 0; i < this.randomMarker.length; i++) {
               let marker = this.randomMarker[i];
               // 判断点是否在可视区域内
               if (bounds.contains(marker)) {
                   // 判断marker是否已经添加到地图上 如果没有添加过则添加
                   if (!this.isMarkerAdded(marker)) {
                       // 将点添加到地图上
                       this.marker = new AMap.Marker({
                           icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                           position: this.randomMarker[i],
                           offset: new AMap.Pixel(-13, -30)
                       });
                       this.marker.setMap(this.map);
                   }
               } else {
                   // 将点从地图上移除
                   this.map.remove(marker);
               }
           }
       },

判断marker是否已经添加到地图上如果没有添加过则添加

isMarkerAdded(nowMarker) {
            // 获取所有标记
            const markers = this.map.getAllOverlays('marker')
            // 判断当前标记是否已经在地图上添加过
            for (let i = 0; i < markers.length; i++) {
                if (markers[i].getPosition().toString() === nowMarker.toString()) {
                    return true
                }
            }
            return false
        }

完整代码如下：

<template>
    <div id="amapcontainer" style="width: 100%; height: 880px"></div>
</template>
  
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: '申请的安全密钥' // '「申请的安全密钥」',
}
export default {
    data() {
        return {
            map: null,
            randomMarker: [], // 随机点数组
            marker: [], // 点数组
            removeMarker: [], // 需要移除的点数组
        }
    },
    methods: {
        initAMap() {
            AMapLoader.load({
                key: "开发者Key", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
                    'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                // 获取到作为地图容器的DOM元素，创建地图实例
                this.map = new AMap.Map("amapcontainer", { //设置地图容器id
                    resizeEnable: true,
                    viewMode: "3D", // 使用3D视图
                    zoomEnable: true, // 地图是否可缩放，默认值为true
                    dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
                    doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
                    zoom: 16, //初始化地图级别
                    center: [108.939645,34.343207], // 初始化中心点坐标 西安
                    // mapStyle: "amap://styles/darkblue", // 设置颜色底层
                })
                this.marker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: [108.939645, 34.343207], 
                    offset: new AMap.Pixel(-13, -30)
                });
                this.marker.setMap(this.map);
                // 生成一组在西安市的随机点经纬度数组
                this.randomMarker = new Array(500).fill(true).map(() => {
                    return [108.939645 + Math.random() * 0.1, 34.343207 + Math.random() * 0.1]
                })
                // 处理经纬度数组，经纬度要保留6位小数
                this.randomMarker = this.randomMarker.map((item) => {
                    return [Number(item[0].toFixed(6)), Number(item[1].toFixed(6))]
                })
                // 添加比例尺控件
                this.map.addControl(new AMap.Scale())
                // 添加缩放控件
                this.map.addControl(new AMap.ToolBar())
                console.log('随机点数组', this.randomMarker)
                // 监听地图移动事件，实现覆盖物懒加载
                this.map.on("moveend", this.lazyLoadMarkers);
            }).catch(e => {
                console.log(e)
            })
        },
        // 懒加载函数，根据可见区域范围判断哪些覆盖物需要展示
        lazyLoadMarkers() {
            // 获取地图可视区域范围
            let bounds = this.map.getBounds();
            console.log('地图可视区域范围', bounds)
            let addMaker = [] // 需要添加到地图上的点数组
            let removeMaker = [] // 需要从地图上移除的点数组
            // 遍历覆盖物数组，判断是否需要展示
            // console.log('需要添加到地图上的点数组', this.randomMarker)
            for (let i = 0; i < this.randomMarker.length; i++) {
                let marker = this.randomMarker[i];
                // console.log('当前点', i, marker)
                // 判断点是否在可视区域内
                if (bounds.contains(marker)) {
                    // 判断marker是否已经添加到地图上 如果没有添加过则添加
                    if (!this.isMarkerAdded(marker)) {
                        // console.log('添加到地图上的标记点', i, marker)
                        addMaker.push(marker)
                        // 将点添加到地图上
                        this.marker = new AMap.Marker({
                            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                            position: this.randomMarker[i],
                            offset: new AMap.Pixel(-13, -30)
                        });
                        this.marker.setMap(this.map);
                    }
                } else {
                    if (this.isMarkerAdded(marker)) {
                        // console.log('从地图上移除的标记点', i, marker)
                        // 将点从地图上移除
                        this.map.remove(this.removeMarker);
                        removeMaker.push(this.removeMarker.getPosition().toString())
                    }   
                }
            }
            console.log('需要添加到地图上的点数组', addMaker)
            console.log('需要删除的点', removeMaker)
        }, 
        // 判断当前标记是否已经在地图上添加过
        isMarkerAdded(nowMarker) {
            // 获取所有标记
            const markers = this.map.getAllOverlays('marker')
            // 判断当前标记是否已经在地图上添加过
            for (let i = 0; i < markers.length; i++) {
                if (markers[i].getPosition().toString() === nowMarker.toString()) {
                    this.removeMarker= markers[i] // 记录需要移除的标记点
                    return true
                }
            }
            return false
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initAMap()
        // 手动触发一次懒加载
        // this.lazyLoadMarkers()
    }
}
</script>
  
<style lang="less"></style>