1.安装百度地图依赖
npm install vue-baidu-map –save
2.注册
引入百度地图,在百度地图开放平台官网申请您的密钥，并填入到“ak:”处：
百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)
import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
? ? ak: '您的密钥'
})
3.在vue项目中直接使用
<template>
?? ??<baidu-map?:center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
? data () {
??? return {
????? center: {lng: 0, lat: 0},
????? zoom: 3
??? }
? },
? methods: {
??? handler ({BMap, map}) {
????? console.log(BMap, map)
? ? ? ? //经纬度
????? this.center.lng = 116.404
????? this.center.lat = 39.915
? ? ? ? //缩放比
????? this.zoom = 15
??? }
? }
}
</script>
<style>
map {
? ? height: 100%;
}
.Coordinate {
? ? width: 40px;
? ? position: fixed;
? ? top: 130px;
? ? left: 170px;
? ? z-index: 99;
}
.mapTop {
? ? position: fixed;
? ? top: 10px;
? ? width: 90%;
? ? margin-left: 15px;
? ? display: flex;
? ? justify-content: space-between;
? ? z-index: 9;
}
.myMap {
? ? width: 100%;
? ? height: 300px;
}
</ style>