Vue Baidu Map使用

最新推荐文章于 2025-05-09 15:39:51 发布

超频化石鱼

最新推荐文章于 2025-05-09 15:39:51 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Baidu Map

本文链接：https://blog.youkuaiyun.com/fyyyr/article/details/84958044

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度地图API，包括两种主要方法：直接在index.html中引入JS文件或通过修改webpack配置。文章详细讲解了使用VueBaiduMap组件库的过程，包括安装、配置及组件使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图官方提供的是常规<script>标签引入的方法。要想将百度地图引入Vue中，有两种方式：

在index.html中引入js文件；修改webpack.base.conf.js来增加externals属性；在主js中调用Vue.use来全局注册或在单个页面中使用import单独引入。这样，在页面中就可以像常规的页面那样使用百度地图了。需要为容器<div>设置一个id属性来初始化地图。
定义一个js文件，export一个加载函数，在其中为document动态添加<script>标签，并加载官方的地图js库。在页面中将该函数import导入，然后正常使用即可。同样需要一个含id属性的容器<div>。

上面这两种方式，1比较直观，2更贴近Vue的风格。百度官方提供了Vue Baidu Map，就是使用了方式2。
Vue Baidu Map定义了一个getMapScript()函数，在其中为document动态创建了一个<script>标签，并将其src设为百度地图JavaScript API v2.0。因此，Vue Baidu Map仅仅是百度官方推出的一个Vue封装，核心功能是动态下载的，与常规页面的百度地图js库是相同的。
然而，Vue Baidu Map是针对百度地图JavaScript API v2.0进行的封装，目前并不兼容百度地图JavaScript API v3.0。

安装

调用命令：

npm install vue-baidu-map --save

安装完成后，package.json中就会添加依赖：

"dependencies": {
    ...
    "vue-baidu-map": "^0.21.14",
    ...
},

node_modules文件夹下也会出现vue-baidu-map文件夹。

使用

在页面中进行导入：

import { BaiduMap, BmScale, BmMapType, BmNavigation } from 'vue-baidu-map/components'

在node_modules/vue-baidu-map/components/index.js中，导出了官方封装的所有地图Vue组件。因此这里可以直接引入多个所需要的组件。
然后在页面的components中注册：

components: { BaiduMap, BmScale, BmMapType, BmNavigation },

然后在页面中使用组件即可：

<baidu-map class="map-container" v-bind="mapOptions" @ready="mapReady" @load="mapLoad" >
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"/>
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>

组件中传入的属性定义在data中。

data() {
   return {
     mapOptions: {
       ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
       center: '北京',
       scrollWheelZoom: true
     }
   }
},

上面为组件注册了ready事件与load事件函数：

methods: {
  mapReady(e) {
    console.log("map ready");
    // let map = e.currentTarget;
  },
  mapLoad(e) {
    console.log("map load");
    // let BMap = e.BMap;
    // let map = e.map;
  }
}

其中：

ready事件与load事件无必然关联。
ready事件是Vue封装触发。load事件是百度地图JavaScript API v2.0提供。
ready事件组件渲染完毕后触发，通常只触发一次。load事件在组件加载时触发，多次加载会触发多次。
ready事件与load事件的触发并无绝对先后顺序。地图主组件BaiduMap在center属性为String时，zoom属性为非必要，此时会先触发ready，后触发load；然而在center属性为Point对象时，zoom属性为必要，此时会先触发load，后触发ready。
ready事件传入的参数为：{BMap, map}。BMap为百度地图构造函数，map为实例化后的地图对象。load事件传入的参数中包含多个属性，其中有个currentTarget属性，就是map实例。
所有地图组件都有ready事件。但只有地图主组件BaiduMap会触发load事件，其他地图组件不会触发。
各个地图组件的ready是按定义顺序触发，故地图主组件BaiduMap的ready一定是最早触发的。因此，在地图主组件的ready中尝试操作子组件有可能不会成功，因为此时子组件尚未ready。所以对组件的操作通常是在组件的ready事件中操作。
若要调用官方API为map动态添加元素，可以在BaiduMap组件的ready事件中执行。