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