Vue Baidu Map 插件的使用

　　最近在做一个项目，技术采用的是Vue.js套餐，有个百度地图的需求，当时，大脑宕机，立马去引入百度地图API，当时想到两种方法，一种是在index.html中全局引入js，此法吾不喜，就采用了第二种异步加载jsonp的方式，细节无关本文，暂且不提。噼里啪啦~噼里啪啦~ 代码一气呵成，本地测试完，立马上服务器测试，what ？？？ 什么鬼 ？ 进入界面后，我的地图呢？？地图呢？？回看代码，代码中有一行window.onload = loadScript，呃~呃~呃~，vue中界面跳转不会触发这个， 欧德科 ？？？ 坑爹啊~ 有木有？？然后立马百度进行搜索，此时眼前一亮，嘻嘻嘻~，我看到了什么？？vue-baidu-map，然后爱酱去官网看文档，看完第一反应莫名其妙~~，为了那些跟我一样不认真看文档，粗心大意，脑袋容易宕机的码农们 ，特记录下这个插件的使用方法。

　　vue-baidu-map 官方地址

　　

　　安装：

　　　这里只介绍npm安装方式

$ npm install vue-baidu-map --save

 

　　注册：

　　　注册的方式有两种 ： 全局注册 & 局部注册 ，各位可以根据自己的需求来选择，我个人采用的是局部注册，按需加载。个人注册了一个公共的MapView.vue组件来实现地图的功能，存放在项目组件库components/common下。

　　　官方文档描述1：局部注册的 BaiduMap 组件必须声明 ak 属性。

　　　　　注: 这个ak指的是你的百度地图开放平台获取到的秘钥

　　　官方文档描述2：所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。

　　　　　刚开始，我就是被这句话给迷惑了，由于没认真看文档，又看到代码，傻傻的去组件库components中新建了一个vue-baidu-map文件夹，然后去注册了一个Map.vue的组件。

　　　　　No~No~No~ 不是这样的。注意：这里指的是vue-baid-map文件夹下的components组件库，而不是我们项目中自己创建的components组件库，不要跟我一样犯傻。

 

　　在安装完vue-baidu-map后，在node_modules中会有一个vue-baidu-map文件夹，我们现在来找到它，它的结构是这样的：

　　　　vue-baidu-map

　　　　　　|__ .github

　　　　　　|__  build

　　　　　　|__ components

　　　　　　|__ test

　　　　　　|__ types

　　看到了吗？ 这里有个components组件库，而官方描述中叫我们引入的是这个文件下的独立组件。

 

　　实现：

　　　　现在我们来看看代码。

　　　　在个人注册的组件MapView.vue中来实现地图功能，

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
　　<!-- baidu-map指的既是BaiduMap组件 -->
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},  //经纬度
      zoom: 3　 //地图展示级别
    }
  },
　　components: {
　　　　BaiduMap  //指定组件模板
　　},
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style lang="less" scoped>
.map {
　　width: 100%;
　　height: 500px; //必须给容器指高度，要不然地图将显示在一个高度为0的容器中，自然看不到
　　
　　/deep/ .anchorBL {　　//隐藏左下角百度地图logo
　　　　display: none;
　　}
}
</style>

 

　　如你需要使用其他的组件，只需要根据官方提供的控件名，通过 import引入组件，然后在components·中指定组件模板，在template中使用即可。

　　例如：现在需要使用定位控件，官方提供的控件名是：BmGeolocation，接下来直接上代码：

　　

<template>
   <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
　　　　<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
　　</baidu-map>
</template>
<script>
　import BaiduMap from 'vue-baidu-map/components/Map/Map.vue
　　import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},  
      zoom: 3　 
    }
  },
　　components: {
　　　　BaiduMap,
　　　　　BmGeolocation
　　},
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style lang="less" scoped>
.map {
　　width: 100%;
　　height: 500px; 
　　
　　/deep/ .anchorBL {　　
　　　　display: none;
　　}
}
</style>

 

文章内容就到此结束了。有什么不对的地方、不同的意见或者建议可以在底部留言。