目录需求知识点实现打点控件封装代码总览代码总结 百度地图的使用: Vue项目,有个 vue-baidu-map 可以用,但是好久不更新了。 React项目,百度官
百度地图的使用:
Vue项目,有个 vue-baidu-map 可以用,但是好久不更新了。
React项目,百度官方出了个React版的,可以直接用,React-BMapGL。
除此以外,百度官方的都是 javascript api,这里以此来用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 />
效果图
参考文档 jsapi_reference_3_0
具体去看 bMarker.vue 文件了,去除百度地图的默认弹窗样式,真的太恶心了。 这里主要值得参考的是自定义弹窗时,html里面通过vue的 runtimeCompiler: true
运行时编译功能,可以调用vue里面的参数和方法,这里对于自定义是很方便的。
效果图
涉及的文件如下(具体参考代码):
|-- 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百度地图封装使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue2项目中对百度地图的封装使用详解
本文链接: https://www.lsjlt.com/news/151695.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0