1.首先在 build.js下面的webpack.base.conf.js文件中添加:
externals:{
"BMap":"BMap"
},
和entry:{}平级,在其后面添加
2.在index.html中引入用到的地图js和css
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6c497f51c06477544e5fa6e9bd68f7c3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
3.新建地图组件:
<template>
<!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
<!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
<div id="allmap" :style="mapStyle"></div>
</template>
<script type="text/javascript">
import BMap from 'BMap'
export default{
data(){
return{
mapStyle:{
width:'100%',
height:this.mapHeight+'px'
}
}
},
props:{
mapHeight:{
type:Number,
default:400
},
//经度
longitude:{
type:Number,
default:116.404
},
latitude:{
type:Number,
default:39.915
}
},
mounted(){
this.ready()
},
methods:{
ready:function(){
var map =new BMap.Map("allmap");
var point =new BMap.Point(this.longitude,this.latitude);
var marker =new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom(true);
var content = '<div style="margin:0;line-height:16px;padding:2px;font-size:12px;">' +
/*'<img :src="s1.jpg" style="float:right;zoom:1;overflow:hidden;width:100px;height:66px;margin-left:3px;"/>'+*/
'地址:北京市丰台区丰台科技园汉威国际广场3区5号楼2M<br/>电话:022-3344563' +
'</div>';
// 信息窗的配置信息
/*var opts ={
width :200,
height:50,
title :"地址:",
}*/
/*var infoWindow =new BMap.InfoWindow(this.description, opts);// 创建信息窗口对象
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,point);
});
map.enableScrollWheelZoom(true);
map.openInfoWindow(infoWindow,point);//开启信息窗口*/
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title : "北京中厚明德", //标题
width : 200, //宽度
height : 70, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(point); // 创建标注
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
});
map.addOverlay(marker); // 将标注添加到地图中
}
}
}
</script>
<style>
#allmap{
width:100%;
height:100%;
}
</style>
4.在单页面中引入该组件即可
<template>
<b-map-component :mapHeight="300" :longitude="116.302183" :latitude="39.830263" ></b-map-component>
</template>
<script>
import BMapComponent from 'base/b-map-component/b-map-component'
export default{
components: {
BMapComponent
}
}
</script>