Vue地图开发新利器：Vue Baidu Map，轻松对接，效率翻倍！

程序视点
1,127 阅读2分钟

大家好，欢迎来到程序视点！我是小二哥！

最近负责的一个Vue项目中需要调用百度地图API做定位、检索等需求。

按照百度地图官方 API 的接入文档，很多功能需要需要改造、封装，实在太繁琐了。

经过查阅对比，最后发现了Vue Baidu Map这个好用的组件。

Vue Baidu Map

Vue Baidu Map简介

Vue Baidu Map 是一个基于 Vue.js 封装的百度地图组件，几乎包含百度地图官方所有的 API 示例，同时也支持引入百度地图扩展包。

Vue Baidu Map

推荐理由

  • 主要设计为 Vue 组件注册的方式使用，也支持 cdn 直接引入。

  • 直接使用封装好的控件API，提高开发的效率。 Vue Baidu Map

  • 官网提供详细的中、英文文档说明以及足够多的代码例子，可以快速应用在项目中。

Vue Baidu Map Vue Baidu Map

使用

这里展示在Vue项目中的使用

安装

NPM加载依赖

$ npm install vue-baidu-map --save

注册

全局注册：一次性引入百度地图组件库的所有组件。

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

局部注册：

import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmView from 'vue-baidu-map/components/map/MapView'; //地图视图
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜索
import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //点标注
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //标注弹窗
....
export default {
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch,
    BmMarker,
    BmInfoWindow
  }
}

模板组件使用

这和我们平常使用的其他模板组件一样。

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

开发体验

  • 官网上的文档以及代码例子非常多，这让新手们非常容易上手。

  • 多数常用的功能都已经进行了二次的封装，让开发者不需要再重复造轮子。

  • 再也不用去看难懂的百度地图官方 API 文档了，可以接入引入组件到自己的 Vue 项目中去。

顺便一提一下...

VUE BAIDU MAP地址

dafrok.github.io/vue-baidu-m…

祝大家搬砖愉快！

写在最后

【程序视点】助力打工人减负，从来不是说说而已！

后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！

如果这篇文章对你有帮助的话，别忘了【点赞】【分享】支持下哦~

avatar
文章
阅读
粉丝