目前项目是 用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:
05px;
}
</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();//设置缩放级别文字 functionsetMapZoomText() {var zoom =map.getZoom();
zoomNumDom.innerText
=zoom;
}
//设置缩放级别 functionmapZoom(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:
05px;
}
</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(
newBMap.ScaleControl());
map.enableScrollWheelZoom(
true);
map.addEventListener(
'zoomend', setMapZoomText);

setMapZoomText();
//设置缩放级别文字 functionsetMapZoomText() {var zoom =map.getZoom();
zoomNumDom.innerText
=zoom;
}
//设置缩放级别 functionmapZoom(type) {var zoom =map.getZoom();if (type === 'less') {
zoom
--;
}
else{
zoom
++;
}

map.setZoom(zoom);
}
</script> </body> </html>

方法一 可以用在2.0版本中, 方法二只能用在3.0中, 并且发现这个全局变量会变化。

标签: none

添加新评论