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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
关于vue-router-link选择样式设置
Apr 30 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
用PHP调用数据库的存贮过程
2006/10/09 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python抽象类的新写法
2015/06/18 Python
python开发之list操作实例分析
2016/02/22 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python zip()函数使用方法解析
2019/10/31 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
解决方案设计综合面试题
2015/08/31 面试题
2013的个人自我评价
2013/12/26 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
奖学金感谢信
2015/01/21 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
Python安装使用Scrapy框架
2022/04/12 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库