百度地图在地图上添加多个点,并调整地图层级及中心点至合适位置大小

项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级.
分享一下其中比较关键点的函数.

/*
* map为当前地图实例
* points_arr为地图定位点的坐标数组['108.920572,34.232179','lng,lat']
**/

function autoRange(map, points_arr) {
        if (points_arr.length === 0) {
            return
        }
        /**
         * 先计算中心点坐标
         * 1. 找出所有点中最大最小经纬度
         * 2. 计算中心点坐标
         *
         *
         * bssw 为左下角
         * bsne 为右上角
         *
         * 目标点的纬度需要大于左下角点的纬度并且小于右上角的纬度
         * 目标点的经度需要大于左下角点的经度并且小于右上角的经度
         *
         */
        let max_lng = points_arr[0].pos_bd.split(',')[0],
            min_lat = points_arr[0].pos_bd.split(',')[1],
            max_lat = points_arr[0].pos_bd.split(',')[1],
            min_lng = points_arr[0].pos_bd.split(',')[0]
        for (let i = 0; i < points_arr.length - 1; i++) {
            let lng_lat = points_arr[i + 1].pos_bd.split(',')
            //   max = max < arr[i+1] ? arr[i+1] : max
            max_lng = max_lng < lng_lat[0] ? lng_lat[0] : max_lng
            min_lng = min_lng > lng_lat[0] ? lng_lat[0] : min_lng
            max_lat = max_lat < lng_lat[1] ? lng_lat[1] : max_lat
            min_lat = min_lat > lng_lat[1] ? lng_lat[1] : min_lat
        }
        // console.log((Number(max_lng) + Number(min_lng)) / 2,(Number(max_lat)+Number(min_lat))/2);
        let n_lng = (Number(max_lng) + Number(min_lng)) / 2
        let n_lat = (Number(max_lat) + Number(min_lat)) / 2

        /**
         * 计算层级
         *  百度地图比例尺与级别关系
         */
        let bs = map.getBounds() //获取可视区域
        let bssw = bs.getSouthWest() //可视区域左下角
        let bsne = bs.getNorthEast() //可视区域右上角
		// 百度地图比例尺与级别关系,参考https://blog.csdn.net/tjj3027/article/details/81015138
        const map_rule = [
            500000,
            250000,
            100000,
            50000,
            25000,
            10000,
            5000,
            2500,
            1250,
            1000,
            500,
            250,
            100,
            50,
            25,
            10,
            5,
            2.5,
            1,
        ]

        let zoomA = [4, 4]
        for (let j = 0; j < 2; j++) {
            let viewSize, searchSize
            if (j === 0) {
                viewSize = bsne.lng - bssw.lng // 当前可视宽度右上角经度-左下角经度
                searchSize = (max_lng - min_lng) * 1.1 // 搜索结果的最大宽度 经度最大值-经度最小值
            } else {
                viewSize = bsne.lat - bssw.lat // 当前可视高度右上角纬度-左下角纬度
                searchSize = (max_lat - min_lat) * 1.1 // 搜索结果的最大宽度 纬度最大值-纬度最小值
            }

            let minDiff = 0
            for (let i = 0; i < map_rule.length; i++) {
                let diff =
                    (viewSize * map_rule[i]) / map_rule[this.map_zoom - 1] - searchSize
                if (diff > 0) {
                    if (minDiff == 0 || diff < minDiff) {
                        zoomA[j] = i + 1
                        minDiff = diff
                    }
                }
            }
        }
        let zoom = zoomA[0] > zoomA[1] ? zoomA[1] : zoomA[0]
        // 设定地图最大缩放层级为18,最小为4
        zoom = zoom >= 18 ? 18 : zoom
        zoom = zoom <= 4 ? 4 : zoom
    	/*
    	*  图移动到新的中点,调整好层级
    	*  这里使用 map.centerAndZoom(new BMap.Point(n_lng, n_lat),zoom)
    	*	屏幕可能会过度晃动,暂时知道原因,所以用了下面的方案
    	**/
        map.setZoom(zoom) //缩放地图
        function setCenter() {
            map.panTo(new BMap.Point(n_lng, n_lat), { noAnimation: false }) // 设置中心点坐标
            map.removeEventListener('tilesloaded', setCenter)
        }
        //地图加载完毕(地图稍微有改动就会触发) 当地图所有图块完成加载时触发此事件
        map.addEventListener("tilesloaded", setCenter);
    }
    // 调用
    autoRange(map,['108.920572,34.232179','108.900572,34.032179'])

结果如图(请无视我这个老旧的地图😊):
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值