1.申请百度地图密钥
2.在index.html中添加百度地图JavaScript API接口
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密钥=&t=20170517145936"></script>
3.在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;
externals: {
'BMap': 'BMap'
},
//以下是实例,不懂得小伙伴可以给我留言哦~
<template>
<div id="Map">
<div id="allmap" class="allmap"></div>
</div>
</template>
<script>
export default {
name: 'Map',
components:{
},
data () {
return {
type: 'tab',
address_detail: '北京市海淀区',
center: {lng: 111, lat:34},
}
},
mounted () {
this.ready()
},
methods: {
ready () {
//MAP
var map = new BMap.Map('allmap')
var point = new BMap.Point(this.center.lng, this.center.lat) //经纬度
map.centerAndZoom(point, 20) //缩放尺寸
map.enableScrollWheelZoom(true) //滚轮放大缩小
map.enableDoubleClickZoom(true) //点击放大
var marker = new BMap.Marker(point) // 创建标注
// 信息窗的配置信息
var opts ={
width :250,
height:75,
title :"<span style='font-size:20px;color:#FF0000;background-color:#FFFFFF'>公司地址:</span>"
}
var infoWindow =new BMap.InfoWindow(this.address_detail, opts);// 创建信息窗口对象
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,point);
});
map.enableScrollWheelZoom(true); //滚轮放大缩小
map.openInfoWindow(infoWindow,point);//开启信息窗口
map.addOverlay(marker) // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //给icon添加动画
}
}
}
</script>
<style scoped>
#allmap{
width: 100%;
height: 500px;
font-size: 18px;
line-height: 36px;
}
</style>