vue-baidu-map
vue-baidu-map copied to clipboard
地图放大问题
[BUG 反馈] 地图放大问题
浏览器版本号
Google Chrome 版本 83.0.4103.61(正式版本) (64 位)
Vue 版本号
[email protected] , @vue/cli 4.1.2
组件库版本号
"vue-baidu-map": "^0.21.22",
现象描述
地图模式设置为 map.setMapStyle({style:'midnight'})
地图初始化的时候最大缩放等级能达到19级,但是如果进行了其他的操作,譬如点击缩放标尺(如果实在初始化的时候放大到19级,然后点击默认缩放控件,明显的感觉到缩放控件一缩短)。
设置:max-zoom="19"也没有效果。这之后鼠标能缩放的最大等级就变成了默认的18,缩小没问题。
完整异常信息
没
在线示例 / 仓库 URL
无
复现用例
<template>
<div class="all">
<baidu-map class="map-all" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="handler" @zoomend="handeleMap" :min-zoom="13">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
<div class="map-text">{{zoomMap}}</div>
</div>
</template>
<script>
export default {
name: 'all',
data() {
return {
center:{lng: 116.404, lat: 39.915},
zoom:19,
zoomMap:''
}
},
methods:{
handeleMap(e){
this.zoomMap = e.target.getZoom()
},
handler({ BMap, map }) {
this.map = map;
this.BMap = BMap;
// 地图自定义风格json文件在publicData里面
map.setMapStyle({style:'midnight'})
}
}
}
</script>
<style scoped>
.map-all{
width: 100vw;
height: 100vh;
}
.map-text{
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
background: #fff;
padding: 20px;
font-size: 20px;
}
</style>
预期输出
19
实际输出
18 无法再放大
实测可以这么解决: 1、安装vue-baidu-map-v3; 2、在调用地图初始化函数地方加上这行代码: window.BMAP_NORMAL_MAP.m.mc = 19。
实测: 使用vue-baidu-map-v3: zoomEnd() { window.BMAP_NORMAL_MAP.m.qc = 19; }, 可以解决