Vue系列：如何将百度地图包装成Vue的组件

主要分解为如下步骤：

（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. <template>
2. <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
3. <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
4. <div id="allmap" v-bind:style="mapStyle"></div>
5. </template>
7. <script>
8. exportdefault{
9. data:function(){
10. return{
11. mapStyle:{
12. width:'100%',
13. height:this.mapHeight +'px'
14. }
15. }
16. },
17. props:{
18. // 地图在该视图上的高度
19. mapHeight:{
20. type:Number,
21. default:500
22. },
23. // 经度
24. longitude:{
25. type:Number,
26. default:116.404
27. },
28. // 纬度
29. latitude:{
30. type:Number,
31. default:39.915
32. },
33. description:{
34. type:String,
35. default:'天安门'
36. }
37. },
38. ready:function(){
39. var map =newBMap.Map("allmap");
40. var point =newBMap.Point(this.longitude,this.latitude);
41. var marker =newBMap.Marker(point);
42. map.addOverlay(marker);
43. map.centerAndZoom(point,15);
44. // 信息窗的配置信息
45. var opts ={
46. width :250,
47. height:75,
48. title :"地址：",
49. }
50. var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象
51. marker.addEventListener("click",function(){
52. map.openInfoWindow(infoWindow,point);
53. });
54. map.enableScrollWheelZoom(true);
55. map.openInfoWindow(infoWindow,point);//开启信息窗口
56. }
57. }
58. </script>
60. <!--Add"scoped" attribute to limit CSS to this component only -->
61. <style scoped>
62. </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#资源命名约定 

 

 

来自为知笔记(Wiz)