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


    目前项目是 用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中, 并且发现这个全局变量会变化。

  • 相关阅读:
    LPR之我见
    安装tensorflow2.2cpu的简洁方法
    anaconda安装keras
    redis 查看当前连接数
    2020 8 14
    docker安装jenkins
    使用docker安装gitlab
    提问:游戏测试与一般的软件测试的区别在哪里?
    “战斗天使”- 测试媛是如何崛起的?
    关系型数据库的几种常用主键
  • 原文地址:https://www.cnblogs.com/rogge7/p/15138501.html
Copyright © 2020-2023  润新知