首发于 前端技术教程
切换模式
如何在vue单页应用中使用百度地图
大宝软件
高度决定视野，技术改变未来。
网上有一些是直接在index.html页面全部引用的，此种使用方式不推荐使用，因为我们项目是组件化的单页应用，强行引入多页应用的开发方式，会破坏整个项目的框架，严重影响性能。
百度开发者平台已经封装了基于vue的地图组件
正确使用方式
安装
$ npm install vue-baidu-map --save全局注册
全局注册将一次性引入百度地图组件库的所有组件。
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>局部注册
如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。
<template>
<baidu-map class="bm-view" ak="YOUR_APP_KEY">
</baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
BaiduMap
}
}
</script>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>引入第三方组件库
第三方组件是对基于百度地图 JS API 开发的开源库的封装，该分类中的组件不参与全局注册，请根据使用频度需求自行进行全局 / 局部注册。
全局注册
import Vue from 'vue'
import {BmlMarkerClusterer} from 'vue-baidu-map'
Vue.component('bml-marker-cluster', BmlMarkerClusterer)局部注册
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
components: {
BmlMarkerClusterer
}
}使用demo代码
<template>
<div class="">
<baidu-map
class="map"
mapType="BMAP_SATELLITE_MAP"
center="北京市海淀区"
:zoom="11"
@ready="handlerMap">
<!--在右上角加入比例尺控件-->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!--在地图左上角加入地图类型控件-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!--版权控件-->
<bm-copyright
anchor="BMAP_ANCHOR_TOP_RIGHT"
:copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>XXXXX发展有限公司</a>'}]">
</bm-copyright>
<!--插入全景控件-->
<bm-panorama></bm-panorama>
<!--行政区划 -->
<bm-boundary name="北京市海淀区" :strokeWeight="2" strokeColor="blue"></bm-boundary>
</baidu-map>
</div>
</template>
<script>
export default{
name:'Supervision',
data(){
return{
}
},
created(){
},
methods:{
//获取左侧分类
handlerMap ({BMap, map}) {
console.log(BMap, map)
}
}
}
</script>
<style scoped="scoped">
.map {
width: 100%;
height: 1300px;
}
</style>
发布于 2022-01-15 12:23
百度地图
百度地图API
百度分享
文章被以下专栏收录
