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+Element实现增删改查的示例源码
Nov 23 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue递归实现树形组件
Jul 15 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
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JS变量及其作用域
2017/03/29 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue生命周期实例小结
2018/08/15 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python自定义异常实例详解
2017/07/11 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
weblogic面试题
2016/03/07 面试题
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
光盘行动倡议书
2014/02/02 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
机器人总动员观后感
2015/06/09 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏