vue-baidu-map改为百度地图V3.0版本
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
很早就用到了vue-baidu-map这个第三方库,也有碰到有时候图层加载不出来的问题,有时间研究了一下,改用了V3.0版本,体验好了很多。
如果不想像下面这么麻烦,有直接可用的百度地图v3.0第三方库L:npm i --save vue-baidu-map-v3
踩坑记录
- 现在的vue-baidu-map已经很久没有更新维护了,还是用的百度地图V2.0版本,可能会出现图层不是最新的问题。
- 设置地图主题样式:官方的默认是V3.0的JSON文件,复制过来,在V2.0使用,地图图层加载会有问题。
- V2.0最大缩放等级只支持18级,V3.0有到19级。
最简单粗暴的办法
直接把依赖包里面的组件全部复制到项目中引入
圈出部分引入项目中,然后在main.js中配置:
import BaiduMap from './components/VueBaiduMap/index';
Vue.use(BaiduMap, {
ak: 'key',
});
然后是改 map 文件夹下的 Map.vue,把getMapScript()里面的这一段
$script.setAttribute("src", `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=_initBaiduMap`);
v=2.0改成v=3.0,就可以使用3.0的百度地图版本了。
这样就最硬核的完成了改地图版本。照着3.0的参考类,可以顺畅的使用。
常用插件:点聚合,需要单独引入,方法如下:
import { BmlMarkerClusterer } from './components/VueBaiduMap/index';
由于项目中需要简约风格的主题样式,这里推荐一个用到的简约主题JSON:
onReadyBMap({BMap, map}) {
// 设置地图样式(简约风格地图样式)
map.setMapStyleV2({ styleJson: [{
"featureType": "poilabel",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "poilabel",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}]});
}
最后附上vue-baidu-map文档地址[:走你](Vue Baidu Map (dafrok.github.io))
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)