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)

},

相关推荐
LIO几秒前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
TeamDev15 分钟前
JxBrowser 8.18.2 版本发布啦!
java·前端·跨平台·桌面应用·web ui·jxbrowser·浏览器控件
netkiller-BG7NYT15 分钟前
yoloutils - Openclaw Agent Skill
前端·webpack·node.js
北城笑笑20 分钟前
FPGA 51,基于 ZYNQ 7Z010 的 FPGA 高速路由转发加速系统架构设计(Xilinx ZYNQ-MINI 7Z010 CLG400 -1)
前端·fpga开发·系统架构·fpga
蜡台24 分钟前
JavaScript async和awiat 使用
开发语言·前端·javascript·async·await
tzy23327 分钟前
AI 对话的流式输出详解——不止于SSE
javascript·ai·llm·sse·readablestream
挖稀泥的工人29 分钟前
能够插入 DOM 的输入框
前端·javascript·vue.js
xiaotao13132 分钟前
第十五章:企业级部署方案
前端·vite·前端打包
weixin_4080996732 分钟前
【实战教程】懒人精灵如何实现 OCR 文字识别?接口调用完整指南(附可运行示例)
java·前端·人工智能·后端·ocr·api·懒人精灵
没有故事、有酒36 分钟前
Vue2中el-table修改表头高度和行高
javascript·vue.js·elementui