vue + 百度地图api

主要分解为如下步骤：

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

?

1	<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平级；

?

1 2 3

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 60 61 62

<template>   <!--<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>   export default {     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中增加标签

     

?

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

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

.