vue百度地图组件

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>