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

news/2024/11/18 16:27:41/

百度地图默认最大缩放级别为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>

http://www.ppmy.cn/news/851873.html

相关文章

自我突破

自我突破

业精于勤&#xff0c;荒于嬉 —— 韩愈《进学解》 随着时间都积累&#xff0c;当自己对工作技能越来越熟练时&#xff0c;难免会陷入 舒适区 &#xff0c;此时就如同人生都 岔路口&#xff0c;突破过去就进入到 新的阶段 &#xff0c;不能则技术水平从此 止步不前。我笃信一个观…
阅读更多...
python爬虫进阶，突破反脚本机制（反爬机制）

python爬虫进阶，突破反脚本机制（反爬机制）

前言 相信大家在做爬虫或者自动化脚本时或多或少的都能遇到反爬机制&#xff08;或者说反脚本机制&#xff09;&#xff0c;最常见的反脚本机制都是在登录时进行验证&#xff0c;据本人大量实战&#xff08;帮粉丝写脚本&#xff09;发现&#xff0c;基本上只要有点水平的网站…
阅读更多...
内网穿透轻松突破内网服务器并远程控制

内网穿透轻松突破内网服务器并远程控制

本期看点&#xff1a; 大家熟知远程控制软件有TeamVeiw&#xff0c;向日葵等等 这些使用起来便捷方便 而当你想单独远程访问公司内部OA系统 由于内部系统并没有在公网&#xff0c;所以无法访问 怎么解决呢&#xff1f; 依靠内网穿透软件来实现 内网穿透无需购买服务器&#xf…
阅读更多...
ATR波段突破策略

ATR波段突破策略

来源&#xff1a;mc官网 区间突破最常使用在日内程序里&#xff0c;不过波段的程序使用起来也不差&#xff0c;基本逻辑就是由开盘向上涨多少要突破作多&#xff0c;向下跌多少要突破做空&#xff0c;很单纯&#xff0c;最主要的因素只有这个突破的临界点是如何决定? 基本突…
阅读更多...
leaflet maxZoom突破18

leaflet maxZoom突破18

在leaflet中&#xff0c;默认的maxZoom为18。当你设置的值大于18后&#xff0c;然后缩放地图&#xff0c;虽然地图做出了缩放效果&#xff0c;但是你会发现地图变成空白&#xff0c;且http请求并未触发19的请求。如果需要加载高于zoom&#xff1a;18的瓦片图&#xff0c;可以按…
阅读更多...
c# 32位程序突破2G内存限制

c# 32位程序突破2G内存限制

起因 在开发过程中&#xff0c;由于某些COM组件只能在32位程序下运行&#xff0c;程序不得不在X86平台下生成。而X86的32位程序默认内存大小被限制在2G。由于程序中可能存在大数量处理&#xff0c;期间对象若没有及时释放或则回收&#xff0c;内存占用达到了1.2G左右&#xff…
阅读更多...
人工智能推动基础科学理论突破 人工智能推动基础科学理论突破

人工智能推动基础科学理论突破 人工智能推动基础科学理论突破

遥想1969年&#xff0c;ARPANET&#xff08;由ARPA创建&#xff09;刚刚成立的时候&#xff0c;还只是美国国防部防止苏联打击的冷战产物。谁曾想在随后的半个世纪&#xff0c;由ARPANET转变而来的Internet竟掀起了如此巨大的波澜。2001年&#xff0c;全球市值最高的前五家公司…
阅读更多...
Nginx TCP反向代理突破端口限制

Nginx TCP反向代理突破端口限制

目录 一&#xff1a;Nginx TCP反向代理 二&#xff1a;Nginx TCP反向代理安装与配置 2.1 Nginx下载和安装 2.2 Nginx的基本操作 2.3 Nginx TCP反向代理的基础配置 2.4 Nginx Stream配置 一&#xff1a;Nginx TCP反向代理 Nginx使用proxy_bind负载tcp socket&#xff0c;解…
阅读更多...
最新文章

Copyright @ 2022~2023