Vue2项目中对百度地图的封装使用详解


Posted in Vue.js onJune 16, 2022

Vue2项目中对百度地图的封装使用详解

百度地图的使用:

vue项目,有个 vue-baidu-map 可以用,但是好久不更新了。

React项目,百度官方出了个React版的,可以直接用,React-BMapGL

除此以外,百度官方的都是 JavaScript API,这里以此来用vue封装下,方便使用。

需求

  • 组件按需引入。个人喜欢代码干干净净,只要项目需要的功能就行了
  • 简单的封装下,方便直接按官方文档使用需要的功能,方便复用
  • 基于Vue2 、JavaScript API v3.0
  • 基于项目需求封装,有些东西没弄,需要的自己DIY吧

知识点

  • Vue插槽 slot,方便在地图上使用各种百度地图功能
  • Vue通知 emit、on。为了传参,主要是获取地图map对象
  • Vue组件封装,加载地图后,各种地图功能,如:打点、划线、弹窗等一系列的封装使用
  • 百度地图自定义弹窗的实现;弹窗调用vue内部方法的实现

实现

components – bmap – index.vue

地图单文件组件,主要代码如下,具体参考代码

<template>
  <div class="bmap-view">
    <div id="bmapcontainer" :style="{ height: mapHeight }" />
    <slot />
  </div>
</template>

<script>
import indexjs from './index.js'
export default {
  ...indexjs
}
</script>

<style lang='scss' scoped>
</style>

components - bmap - bmap-jsapi-loader - index.js

百度地图异步加载的处理文件,具体看代码

components – map – index.js

地图组件的业务代码,可以配置地图开放的属性props和监听事件。

例如这里,开放了ak(申请的百度地图key),styleId(百度地图样式id),zoom(缩放值),center(地图加载默认中心点),height(地图默认高度值)

主要代码如下,具体参考代码

import BMapLoader from './bmap-jsapi-loader'

export default {
  name: 'BmapView',
  props: {
    ak: {
      type: String,
      default: 'ZMVYYKDUVYZIHl5ygAaKyBhs7Gkg24SX'
    },
    styleId: {
      type: String,
      default: '41d153e7e9e7bcda9541996853046c93'
    },
    zoom: {
      type: Number,
      default: 15
    },
    center: {
      type: [Array, String],
      default() {
        return [113.22682, 23.410167]
      }
    },
    height: {
      type: Number | String,
      default: 520
    }

  },
  computed: {
    mapHeight() {
      return isNaN(this.height) ? this.height : `${this.height}px`
    }
  },
  data() {
    return {
      map: ''
    }
  },
  beforeDestroy() {
    this.map = null
  },
  mounted() {
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      BMapLoader.load({
        key: this.ak,
        version: '3.0'
      }).then((BMap) => {
        this.map = new BMap.Map('bmapcontainer', {
          enableBizAuthLogo: false
        })
        const point = new BMap.Point(this.center[0], this.center[1])
        this.map.centerAndZoom(point, this.zoom)
        this.map.setMapStyleV2({
          styleId: this.styleId
        })

        this.$emit('bmap-ready', this.map)
      }).catch(e => {
        console.log(e)
      })
    }

  },
  watch: {}
}

以上是使用百度地图的基础

调用方式

views - bmapTest - index.js

components: {
  BmapView: () => import ('@/components/bmap/index.vue')
}

views - bmapTest - index.vue

<bmap-view />

效果图

Vue2项目中对百度地图的封装使用详解

打点控件封装

参考文档 jsapi_reference_3_0

具体去看 bMarker.vue 文件了,去除百度地图的默认弹窗样式,真的太恶心了。 这里主要值得参考的是自定义弹窗时,html里面通过vue的 runtimeCompiler: true运行时编译功能,可以调用vue里面的参数和方法,这里对于自定义是很方便的。

效果图

Vue2项目中对百度地图的封装使用详解

代码总览

涉及的文件如下(具体参考代码):

|-- public
    |-- images  // 注意,地图需要到的图片放这里
|-- src
    |-- components
        |-- bmap
            |-- bmap-jsapi-loader
                |-- index.js
            |-- bMarker.vue    // 打点、弹窗控件封装
            |-- index.vue    // 地图单文件组件,供界面调用
            |-- index.js    // 地图初始化、配置相关
    |-- views
        |-- bmapTest    // 演示实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

代码

按代码总览的目录去代码里找着看就行了。

总结

以上,只是简单的封装。百度地图的api真的是不如高德地图好用。以上的封装已满足本人项目需求,别的功能可以自己按需扩展了。

到此这篇关于Vue2项目中对百度地图封装使用的文章就介绍到这了,更多相关Vue2百度地图封装使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Vue.js 相关文章推荐
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
You might like
ZF框架实现发送邮件的方法
2015/12/03 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python中self原理实例分析
2015/04/30 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
使用TensorFlow实现SVM
2018/09/06 Python
使用numba对Python运算加速的方法
2018/10/15 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python函数调用追踪实现代码
2020/11/27 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
ORACLE十问
2015/04/20 面试题
保密协议书范本
2014/04/22 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
房屋买卖定金协议书
2016/03/21 职场文书