vue-baidu-map添加了类型组件导致非常卡顿的问题

<bm-map-type

:map-types="'BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'"

:offset="{ width: 360, height: 165 }"

></bm-map-type>

<!-- 缩放控件 anchor代表控件停靠位置 anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

<!-- 插入全景控件 -->

<bm-panorama :offset="{ width: 300, height: 150 }"></bm-panorama>

这种写法会导致地图类型图标一直加载导致页面非常卡顿

解决办法

注释掉上面代码,修改成下面代码

handler({ BMap, map }) {

//添加地图类型控件

map.addControl(

new BMap.MapTypeControl({

mapTypes: BMAP_NORMAL_MAP, BMAP_HYBRID_MAP,

offset: new BMap.Size(360, 165),

})

)

//设置中心点坐标

var pointCenter = new BMap.Point(116.133715, 40.128512)

//构造全景控件

var stCtrl = new BMap.PanoramaControl()

//地图初始化,同时设置地图展示级别

map.centerAndZoom(pointCenter, 6)

map.setMinZoom(3)

//开启鼠标滚轮缩放

map.enableScrollWheelZoom(true)

//设置全景地图摄像头偏移位置

stCtrl.setOffset(new BMap.Size(300, 150))

//添加全景控件

map.addControl(stCtrl)

//mapB.setMapStyle(mapStyle);

map.enableScrollWheelZoom(true)

},

相关推荐
WILLF14 分钟前
前端视角:Python requests vs JS axios
前端·python
半个落月18 分钟前
在浏览器里运行 DeepSeek-R1:React 对话界面与安全渲染(三)
前端·人工智能·react.js
Synmbrf21 分钟前
micro-app 404 问题排查与修复
前端
西安栈上月明软件科技有限公司24 分钟前
GEO 友好度检测器技术实现(已开源)
前端
汉堡大王952729 分钟前
用 Trae Work 自动化任务,6 分钟生成一份前端生态周报
前端·javascript·人工智能
深圳佛手31 分钟前
安装DeepSeek Harness npx @deepseek-ai/dsh web 长时间没反应,安装失败,如何解决?
前端
Csvn1 小时前
事件循环与渲染时机:一文吃透宏任务、微任务和 rAF
前端
章鱼小丸子逃跑中1 小时前
【2025最新版】如何将fnm与node.js安装在D盘?【保姆级安装及人性话理解教程】
前端·javascript·npm·node.js
Larcher1 小时前
从 SDD 到可交付:我如何用规范驱动 AI 做出一个 Chrome 翻译插件
前端·后端·架构
suaizai_2 小时前
AI Agent如何懂你:四层能力拆解
java·前端·人工智能