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实现购物小球抛物线的方法实例
Nov 22 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue3不同环境下实现配置代理
May 25 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
改造一台复古桌面收音机
2021/03/02 无线电
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
微信小程序如何获取地址
2019/12/24 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python中的二维列表实例详解
2018/06/19 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
公司新年寄语
2014/04/04 职场文书
优质服务活动实施方案
2014/05/02 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
个人典型事迹材料
2014/12/30 职场文书
小孩不笨观后感
2015/06/03 职场文书
如何写通讯稿
2015/07/22 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python