标签：map 缩放 -- MAP zoom window BMAP 级别
目前项目是 用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中， 并且发现这个全局变量会变化。
标签：map,缩放,--,MAP,zoom,window,BMAP,级别 来源： https://www.cnblogs.com/rogge7/p/15138501.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。