本文记录一下百度地图的调用
1.官网获得密钥
https://lbsyun.baidu.com/
2.下载插件
代码如下:
npm install vue-baidu-map --save
npm i install vue-jsonp
2.在main.js中引入
import BaiduMap from "vue-baidu-map";
import { VueJsonp } from "vue-jsonp";
Vue.use(VueJsonp);
Vue.use(BaiduMap, {
ak: "你的密钥"
});
3.在index.html中引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
4.在xxx.vue中
<template>
<div id="app">
<div
id="allmap"
ref="allmap"
></div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
map () {
let map = new window.BMap.Map(this.$refs.allmap) // 创建Map实例
map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 15) // 初始化地图,设置中心点坐标和地图级别
map.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件
mapTypes: [
window.BMAP_NORMAL_MAP,
window.BMAP_HYBRID_MAP
]
}))
map.setCurrentCity('四川省') // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放
}
},
mounted () {
this.map()
}
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#allmap {
height: 800px;
overflow: hidden;
}
</style>
注意
百度地图放置需要设定行高宽,否则无法显示。