vue + 百度地图api

vue + 百度地图api

主要分解为如下步骤：

（1）在html文件中引入百度地图，

<script type=”text/javascript” src=” http://api.map.baidu.com/api?v=2.0&ak=your token “></script>

 

（2）在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；

externals: {

   “BMap”: “BMap”

 }, 

 

（3）添加地图组件BMapComponent.vue，这里主要注意两点：

    a）使用BMap的时候不需要import了，import反而会报错     

    b）注意一定要给bmap的div设置高度，否则会看不见

该组件的代码如下

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

< template >< br > <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>--> <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>--> < div id="allmap" v-bind:style="mapStyle"></ div > </ template > < script > exportdefault{ data:function(){ return{ mapStyle:{ width:'100%', height:this.mapHeight +'px' } } }, props:{ // 地图在该视图上的高度 mapHeight:{ type:Number, default:500 }, // 经度 longitude:{ type:Number, default:116.404 }, // 纬度 latitude:{ type:Number, default:39.915 }, description:{ type:String, default:'天安门' } }, ready:function(){ var map =newBMap.Map("allmap"); var point =newBMap.Point(this.longitude,this.latitude); var marker =newBMap.Marker(point); map.addOverlay(marker); map.centerAndZoom(point,15); // 信息窗的配置信息 var opts ={ width :250, height:75, title :"地址：", } var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象 marker.addEventListener("click",function(){ map.openInfoWindow(infoWindow,point); }); map.enableScrollWheelZoom(true); map.openInfoWindow(infoWindow,point);//开启信息窗口 } } </ script > <!--Add"scoped" attribute to limit CSS to this component only --> < style scoped> </ style >

（4） 在父组件中使用

    a）引入 import BMapComponent from ‘./components/BMapComponent.vue’

    b）在template中增加标签

     <b-map-component></b-map-component>

    注意这里标签的命名，在vue文档中有说： http://vuejs.org.cn/guide/components.html#资源命名约定 

.