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+iview分页组件的封装
Nov 17 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue实现在data里引入相对路径
Jun 05 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
javascript 跳转代码集合
2009/12/03 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python实现mean-shift聚类算法
2020/06/10 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书