百度地图突破19级缩放限制解决方案

最新推荐文章于 2023-09-19 17:16:49 发布
最新推荐文章于 2023-09-19 17:16:49 发布
阅读量6.2k 收藏 6
点赞数 2
分类专栏： 地图 百度地图 文章标签： 百度地图 地图 19级 缩放限制 突破
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihefei_coder/article/details/107384230
版权
本文介绍如何将百度地图的缩放级别从默认的19级扩展到25级，提供两种方法：一是通过自定义瓦片设置，二是重置百度地图的全局变量。适用于需要更高精度地图显示的应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

百度地图默认最大缩放级别为19级，但在某些场景中需要结合自定义贴图实现更高级别的视图
通过下面提供的两种方式就能自定义最大最小缩放层级

缩放到20级的效果图

在这里插入图片描述

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

提示：请使用自己申请的《百度地图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: 15, maxZoom: 25 });
			
			const zoomNum = 15;
			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>

历史版本：

<!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.X3 = window.BMAP_NORMAL_MAP.m.mc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.X3 = window.BMAP_PERSPECTIVE_MAP.m.mc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.X3 = window.BMAP_SATELLITE_MAP.m.mc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.X3 = window.BMAP_HYBRID_MAP.m.mc = 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>
高精度地图领域常见术语解释
qq_40664711的博客
03-22 4377
本文是笔者在学习高精度地图业务过程中，针对行业术语理解记录下来的注解，
vue-baidu-map突破19级缩放限制解决方案
最新发布
m0_57344835的博客
02-29 798
minZoom控制地图最小缩放，maxZoom控制最大缩放级（注：最大缩放级别超过20地图显示一片灰色但标注的内容可以展示出来）data中定义map和BMap变量。
百度地图缩放级别限制到19级解决办法
qq_22826715的博客
01-09 8055
let defaultMapType = this.map.getMapType(); let defaultTileLayer = defaultMapType.getTileLayer(); let newMapType = new this.BMap.MapType("新地图",defaultTileLayer,{minZoom:this.minZoom,maxZoom:this.max...
使用vue-baidu-map组件库突破原本缩放比例的方法
weixin_69437152的博客
09-19 700
使用vue-baidu-map组件库突破原本缩放比例的方法
android/ios--百度地图控制当前地图缩放级别(解决方案)
程序员的良师益友
10-21 3551
原文转自：http://tieba.baidu.com/p/3200748831 http://tieba.baidu.com/p/3200748831
百度地图级别总共有19级，以下为详细内容
热门推荐
yhj198927的博客
04-28 3万+
// 级别 比例尺 // 19级 20m // 18级 50m // 17级 100m // 16级 200m // 15级 500m // 14级 1km // 13级 2km // 12级 5km // 11级 10km // 10级 20km // 9级 25km ...
Vue-baidu-map离线地图解决方案：全面的安全性考量与策略
[Vue-baidu-map离线地图解决方案：全面的安全性考量与策略](https://opengraph.githubassets.com/3e862c38903359636ab2c6d5ea4a8cac896ca7bfdeee21609f758e18a498743c/pbkompasz/vue-map) # 摘要 随着Web应用的普及...
HTML5页面中的地图集成：一步到位的百度地图App唤醒技术
[HTML5页面中的地图集成：一步到位的百度地图App唤醒技术](https://opengraph.githubassets.com/e1b2874a7123eeb5e9f6704d42a4f718c5a99203baa22505fe18c652c2cfa449/supersheep/baidu-map) # 摘要 本文详细阐述了...
一步成神：UniApp中百度地图API集成与配置秘籍
![一步成神：UniApp中百度地图API集成与配置秘籍]...百度地图API作为国内领先的地图服务提供者，为开发者提供了一系列强大的地图
【移动应用开发】：HTML5如何提供无与伦比的百度地图App调用体验
本文首先概述了HTML5和移动应用开发的基本概念，随后深入探讨了百度地图API的基础理论和使用环境，并分析了如何将HTML5与百度地图API融合实现核心地图功能。进一步，本文讨论了HTML5在百度地图App中的创新应用，例如...
禁止百度地图缩放和拖拽
Polarisone的博客
12-02 5497
此处的bMap是自己存的变量名称,不是百度地图自带的 直接上代码了 bMap.disableDoubleClickZoom() //禁止缩放 bMap.enableScrollWheelZoom(false); //开启鼠标滚轮缩放 bMap.disableDragging(); //禁止拖拽 ...
百度地图API缩放级别和比例尺记录
DaveLeeCN的博客
01-18 3万+
最近项目用到百度地图API，因为没办法在地图上显示缩放级别（maybe可以显示，不过没研究），所以在只能显示比例尺的情况下做一个级别和比例尺对应的记录。 http://api.map.baidu.com/lbsapi/getpoint/index.html:具体可参考此页面。 百度地图API一共分为19级，比例尺分别为： [1:20米（简称20米，后同），50米，100米，200米，500米
百度地图 设置地图最小 最大级别
jrrfgj的博客
11-05 3292
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1、问题背景&
百度地图缩放级别与比例尺的关系
博哥的二进制世界
08-12 1万+
背景 最近做了一个项目，需要用户在缩放百度地图的时候，能根据地图缩放级别以及地图中心坐标，动态更新地图上的标注点（比如根据地图缩放级别以及地图中心坐标动态获取手机屏幕视界范围内的共享单车位置），这时候就需要根据地图中心坐标点以及通过地图缩放级别获取比例尺，来计算手机屏幕视界的经纬度范围，从而获取当前范围内的共享单车位置 百度地图缩放级别与比例尺对应数值 百度地图缩放级别从19~1，共分为19级，级别越大，范围越小： [19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级
BaiduMap SDK-TileOverlay(瓦片图层)
牛八少爷的专栏
07-21 2259
1 瓦片简介    瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵;在第0层地...
基于行政区划的百度个性化地图及遥感影像栅格瓦片下载合成器（可叠加行政区划，适合用作科研遥感影像附图）
HouGISer的博客
11-23 2828
文章目录背景 背景 我们知道，地图分为栅格和矢量两种。以往基本都是栅格地图，后来随着技术发展和地理数据不断积累，矢量地图慢慢开始流行。现在网络上看到的百度、高德、腾讯地图等，基本都是基于矢量切片来显示的，而遥感卫星影像，自然还是栅格切片。 百度地图个性在线编辑器旧版 ...
百度地图自定义背景图瓦片图制作流程
军魂L
09-30 3117
百度地图瓦片图制作流程 1、下载BaiduMapTileCutter.exe 链接: https://pan.baidu.com/s/1uxgiz8j9keQd19qz2byT5Q 提取码: cwva 2、打开下载好的软件 1）、选择要切瓦片图的图片，选好后下一步： 2）、选择输入的路径：选一个你想要存放的路径 3）、选择输出的类型：（如果你选的是：“图块以及代码”的话，到时候输出的文件里面是有一个html文件，里面有写好的代码给你看怎么写；如果选择“仅图块”，输出的只有图片） 4）、坐标设置：这里就
百度地图级别
xif3681的博客
07-13 6234
1. //minZoom：设置地图允许的最小级别，maxZoom：设置地图允许的最大级别 2. var map = new BMap.Map("allmap", { 3. minZoom : 1, 4. maxZoom : 18 1.      //minZoom：设置地图允许的最小级别，maxZoom：设置地图允许的最大级别2.       var map = new BMap...
百度地图SDK提供的地图类型和图层的实现
weixin_45755438的博客
11-26 659
1.环境搭建（参考上一次的文章） 2.百度地图SDK提供了3种预置的地图类型，包括普通地图，卫星图，空白地图。另外提供了2种常用图层实时路况图以及百度城市热力图。其中要注意的是百度地图SDK所提供的地图缩放等级为4-21级（室内图可以缩放至22级，卫星图只支持缩放到20级），只有在地图层级介于11-20级时，方可显示城市热力图。 3.较完整地代码实现 activity_main.xml源码 &lt...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值