vue使用百度地图多个信息窗口

最新推荐文章于 2024-07-16 09:36:53 发布

weixin_51357103

最新推荐文章于 2024-07-16 09:36:53 发布

阅读量1.6k

点赞数

文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/weixin_51357103/article/details/122324275

版权

本文介绍了在Vue.js项目中如何使用vue-baidu-map库创建并管理多个百度地图信息窗口。首先通过npm安装依赖，然后在组件中引用并配置，包括设置地图中心、缩放、事件绑定等。接着展示了如何创建点标记、信息窗口，并结合数据动态显示行驶信息。

摘要由CSDN通过智能技术生成

vue使用百度地图多个信息窗口

1、npm install vue-baidu-map --save
2、min.js里引用
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
key: “你申请的密钥”,
plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’],
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4’, //这里是vue-amp 的版本号
//这里是高德ui组件的版本号3
uiVersion: ‘1.0’ //添加 uiVersion 的脚本版本号这个很重要!必须要引入

})
3、组件里使用
引入
import BaiduMap from “vue-baidu-map/components/map/Map.vue”;
import BmScale from “vue-baidu-map/components/controls/Scale”;
import BmNavigation from “vue-baidu-map/components/controls/Navigation”;
import BmMarkerClusterer from “vue-baidu-map/components/extra/MarkerClusterer”;
import BmMarker from “vue-baidu-map/components/overlays/Marker”;
import BmInfoWindow from “vue-baidu-map/components/overlays/InfoWindow”;
（