其他分享
首页 > 其他分享> > 地图升级一下 -- 希望缩放级别能提高点

地图升级一下 -- 希望缩放级别能提高点

作者:互联网

目前项目是 用2D版本的2.0版本。 2D有 1.0 2.0 3.0 版本。都是最高19级别。最大能看到10米。

而最新版本的BMapGL  3D版本是1.0.   可以看3d 立体,可以看不同楼层,现在很多大商场里面的楼层指引 就是用这种地图。可以看到21级5米。

GL | 百度地图API SDK
https://lbsyun.baidu.com/index.php?title=jspopularGL

 

https://lbsyun.baidu.com/jsdemo.htm#a1_2

 

 正常2D版最大只能到20米的。经过一番查资料,偏门。

百度地图突破19级缩放限制解决方案_lihefei_coder的博客-CSDN博客
https://lihefei.blog.csdn.net/article/details/107384230

摘抄如下:

方法一:通过自定义瓦片迂回方式设置

提示:请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>百度地图突破19级缩放限制</title>
        <style>
            html,
            body,
            .map {
                height: 100%;
                margin: 0;
            }
            .map-tools {
                position: absolute;
                right: 20px;
                top: 10px;
                z-index: 10;
                padding: 5px 8px;
                background-color: #fff;
                border-radius: 2px;
                font-size: 14px;
                box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;
            }

            .zoom-less,
            .zoom-plus {
                border: 1px solid #ddd;
            }
            .zoom-num {    
                padding: 0 5px;
            }

        </style>
    </head>

    <body>
        <div class="map-tools">
             <span>缩放范围:15~25&emsp;&emsp;</span>    
             <button class="zoom-less" onclick="mapZoom('less')">-</button>
             <strong class="zoom-num">0</strong>
             <button class="zoom-plus"  onclick="mapZoom('plus')">+</button>
        </div>
       
        <div class="map" id="map"></div>
        <script src="https://api.map.baidu.com/api?v=3.0&ak=此处使用你自己的key"></script>
        <script>
            const map = new BMap.Map('map');
            const defaultMapType = map.getMapType();
            const defaultTileLayer = defaultMapType.getTileLayer();
            const newMapType = new BMap.MapType('新地图', defaultTileLayer, { minZoom: 3, maxZoom: 25 });
            
            const zoomNum = 20;
            const zoomNumDom = document.querySelector('.zoom-num');

            map.setMapType(newMapType);
            map.centerAndZoom(new BMap.Point(116.404, 39.915), zoomNum);
            map.addControl(new BMap.ScaleControl());  //添加比例尺
            map.enableScrollWheelZoom(true); //激活鼠标滚轮缩放
            map.addEventListener('zoomend', setMapZoomText); //监听地图缩放

            setMapZoomText();

            //设置缩放级别文字
            function setMapZoomText() {
                var zoom = map.getZoom();
                zoomNumDom.innerText = zoom;
            }

            //设置缩放级别
            function mapZoom(type) {
                var zoom = map.getZoom();

                if (type==='less') {
                    zoom--;
                } else {
                    zoom++;
                }    

                map.setZoom(zoom);
            }
        </script>
    </body>
</html>

 

 

方法二:通过重置百度地图的全局变量(百度地图3.0版本)

提示:请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》

2021-03-16更新:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>百度地图突破19级缩放限制</title>
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0;
        }

        .map-tools {
            position: absolute;
            right: 20px;
            top: 10px;
            z-index: 10;
            padding: 5px 8px;
            background-color: #fff;
            border-radius: 2px;
            font-size: 14px;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;
        }

        .zoom-less,
        .zoom-plus {
            border: 1px solid #ddd;
        }

        .zoom-num {
            padding: 0 5px;
        }
    </style>
</head>

<body>
    <div class="map-tools">
        <span>缩放范围:15~25&emsp;&emsp;</span>
        <button class="zoom-less" onclick="mapZoom('less')">-</button>
        <strong class="zoom-num">0</strong>
        <button class="zoom-plus" onclick="mapZoom('plus')">+</button>
    </div>

    <div class="map" id="map"></div>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=此处使用你自己的key"></script>

    <script>
        const maxZoom = 25; //最大层级
       window.BMAP_NORMAL_MAP.m.u4 = window.BMAP_NORMAL_MAP.m.qc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.u4 = window.BMAP_PERSPECTIVE_MAP.m.qc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.u4 = window.BMAP_SATELLITE_MAP.m.qc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.u4 = window.BMAP_HYBRID_MAP.m.qc = window.BMAP_HYBRID_MAP.m.maxZoom = maxZoom;   


        const map = new BMap.Map('map', { minZoom: 15 });

        const zoomNum = 15;
        const zoomNumDom = document.querySelector('.zoom-num');

        map.centerAndZoom(new BMap.Point(116.404, 39.915), zoomNum);
        map.addControl(new BMap.ScaleControl());
        map.enableScrollWheelZoom(true);
        map.addEventListener('zoomend', setMapZoomText);

        setMapZoomText();

        //设置缩放级别文字
        function setMapZoomText() {
            var zoom = map.getZoom();
            zoomNumDom.innerText = zoom;
        }

        //设置缩放级别
        function mapZoom(type) {
            var zoom = map.getZoom();

            if (type === 'less') {
                zoom--;
            } else {
                zoom++;
            }

            map.setZoom(zoom);
        }
    </script>
</body>

</html>

 

方法一 可以用在2.0版本中, 方法二只能用在3.0中, 并且发现这个全局变量会变化。

 

标签:map,缩放,--,MAP,zoom,window,BMAP,级别
来源: https://www.cnblogs.com/rogge7/p/15138501.html