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

时间：2023-12-30 21:23:44

主要分解为如下步骤：

（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#资源命名约定 
Vue系列：如何将百度地图包装成Vue的组件

相关文章