vue-baidu-map icon indicating copy to clipboard operation
vue-baidu-map copied to clipboard

地图放大问题

Open zmannnnn opened this issue 4 years ago • 2 comments

[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 无法再放大

zmannnnn avatar Aug 06 '20 06:08 zmannnnn

实测可以这么解决: 1、安装vue-baidu-map-v3; 2、在调用地图初始化函数地方加上这行代码: window.BMAP_NORMAL_MAP.m.mc = 19。

code-huisoido avatar Sep 08 '20 01:09 code-huisoido

实测: 使用vue-baidu-map-v3: zoomEnd() { window.BMAP_NORMAL_MAP.m.qc = 19; }, 可以解决

yaxproo avatar May 25 '22 09:05 yaxproo