1: 在index.html文件下添加
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAk"></script>
2: 在build文件夹下找到webpack.base.conf.js并在entry 同级下 添加externals: { 'BMap': 'BMap' },
3: 在 components中添加 BMapComponent.vue,具体代码如下:
<template>
<div id="allmap" v-bind:lat="lat" v-bind:lng="lng" v-bind:style="mapStyle" ></div>
</template>
<script>
export default {
data() {
return {}
},
props: ['lat', 'lng','mapStyle'],
mounted() {
this.initMap();
},
methods: {
initMap: function() {
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(this.lng, this.lat);
map.centerAndZoom(point, 10);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.disableDragging(); // 不可拖拽
}
}
}
</script>
<style>
#allmap {
top: 15px;
overflow: hidden;
}
/* 去掉地图左下角的百度LOGO */
.anchorBL {
display: none
}
</style>
4:在所使用组件中如下
<style scoped >
.mapBox {
width: 100%;
height: 3rem;
margin-top: 15px;
text-align: center;
}
.mapBox span {
color: '#ccc', ;
font-size: 18px;
font-style: normal;
font-family: 'sans-serif';
font-weight: bold;
}
</style>
<template>
<div>
<v-head :header_title="title_context"></v-head>
<section class="section">
<div class="mapBox" id="flowChartImg">
<span>企业地理位置</span>
<b-map-component :lat="lat" :lng="lng" :style="mapStyle"></b-map-component>
</div>
</section>
</div>
</template>
<script>
import head from "../../components/head";
import BMapComponent from '../../components/BMapComponent.vue';
export default {
data() {
return {
title_context: "厂站信息",
lat: 39.74858,
lng: 116.572487,
mapStyle:{
width:'100%',
height:'100%'
}
}
},
components:{
vHead: head,
BMapComponent: BMapComponent,
},
methods: {},
mounted() {}
}
</script>