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

最新推荐文章于 2023-09-19 17:16:49 发布

原创

最新推荐文章于 2023-09-19 17:16:49 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #地图 #19级 #缩放限制 #突破

本文介绍如何将百度地图的缩放级别从默认的19级扩展到25级，提供两种方法：一是通过自定义瓦片设置，二是重置百度地图的全局变量。适用于需要更高精度地图显示的应用场景。

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

最低0.47元/天解锁文章

11 条评论

前端卡农 2024.08.14
请问哪来的自己的key?

钢琴键-老是后悔 2023.03.21
楼主现在我没有突破21级，在18-19级的时候地图就出来了灰色空白的情况了，你知道这是什么原因吗
- lihefei_coder回复钢琴键-老是后悔 2023.03.23
  你在浏览器网络面板里检查一下瓦片的请求结果是成功的还是失败的

zcm629 2021.09.09
突破层级后，有出现mac电脑放大20时，整个地图出现灰色空白的情况吗？
- lihefei_coder回复zcm629 2021.09.09
  如果你配置的自定义瓦片在20级没有切图就是灰色的

清川尘 2020.10.14
请问楼主，缩放级别到21及以上地图直接消失的问题怎么解决呢
- lihefei_coder回复清川尘 2020.10.15
  百度地图最高只有20级的底图，21级及以上需要自定义叠加底图，了解一下TileLayer

Insist_Smile 2020.07.29
按照楼主这么写了之后没有生效呢
- 清川尘回复Insist_Smile 2020.10.24
  谢谢
- lihefei_coder回复Insist_Smile 2020.07.30
  [reply]Insist_Smile[/reply]你把方法一的代码复制运行看看，示例里缩放21级时右下角的标尺是5米，再对比下你自己的代码是不是哪里有差异
- Insist_Smile回复Insist_Smile 2020.07.29
  [reply]Insist_Smile[/reply]let newMapType = new BMap.MapType("新地图",map.getMapType().getTileLayer(),{minZoom:1,maxZoom:21}); map.setMapType(newMapType); console.log(map.getMapType()) 打印出来maxZoom为21了，可是地图上仍然只能缩放到50m，再小就不行了