【Vue】集成百度地图

Vue 集成百度地图

1、获取百度地图 ak 密钥
2、登录网址 https://lbsyun.baidu.com/
在这里插入图片描述

3、注册百度地图开放平台账号，填写认证信息，并且创建应用在这里插入图片描述

安装

npm install vue-baidu-map --save

main.js

import BaiduMap from 'vue-baidu-map';Vue.use(BaiduMap, {ak: '你的AK 密钥',
});

示例

注意

BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

入门 HelloWorld

<template><div ><baidu-map :center="mapCenter" :zoom="mapZoom" class="map-container" @ready="handler"></baidu-map></div>
</template><script>
import { BaiduMap} from 'vue-baidu-map';
export default {name: "HelloWorld",components: {BaiduMap,},data() {return {// 中心坐标mapCenter: { lng: 116.397428, lat: 39.90923 },// 缩放级别,1~19mapZoom: 13,BMap:null,map:null};},methods: {handler ({BMap, map}) {this.BMap = BMap;this.map = map;}}
}
</script><style scoped>.map-container{width: 100%;height: 600px;}
</style>

简单封装地图

地图组件

<template><div><baidu-map :center="center" :zoom="zoom" class="map-container"></baidu-map></div>
</template><script>
import { BaiduMap } from 'vue-baidu-map';
export default {components: {BaiduMap},props: {center: {type: String,required: true,},zoom: {type: Number,default: 13,},},data() {return {map: null,};}
}
</script><style scoped>
.map-container {width: 100%;height: 400px;
}
</style>

使用

<template><div><el-row><el-col :span="24"><el-row><el-col :span="24"><el-card class="box-card" shadow="never"><b-d-map :center="mapCenter" :zoom="mapZoom" ref="bdMap"></b-d-map></el-card></el-col></el-row></el-col></el-row></div>
</template>
<script>
import BDMap from "@/components/BDMap.vue";
export default {name: 'HomeIndex',components: {BDMap},data() {return {mapCenter: '合肥',mapZoom: 13,}}
}
</script>
<style scoped></style>