您的位置: 首页  >  文章  >  Vue系列：如何将百度地图包装成Vue的组件

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

分类: 文章 • 2025-01-21 13:01:01
（1）在index.html文件中引入百度地图，

<script type="text/JavaScript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script>

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

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

}, 

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

（3）添加地图组件BMapComponent.vue，这里主要注意两点：
    a）使用BMap的时候需要import (经过本人测试，如果不用import会提示BMap未定义)

Vue系列：如何将百度地图包装成Vue的组件    
    b）注意一定要给bmap的div设置高度，否则会看不见
该组件的代码如下

[html] view plain copy
  1. <!-- 页面模版 -->  
  2. <template>  
  3.   <div>  
  4.     <!--header-->  
  5.     <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>  
  6.     <!--header end-->  
  7.   
  8.     <!--container-->  
  9.     <div id="allmap"   
  10.             style="  
  11.                 width: 100%;   
  12.                 height:200px;   
  13.                 border: 1px solid gray;  
  14.                 overflow:hidden;">  
  15.         </div>  
  16.     <!--container end-->  
  17.   </div>  
  18. </template>  
  19. <script>  
  20. import comHeader from 'components/comHeader'  
  21. import BMap from 'BMap'  
  22. export default {  
  23.   components: {  
  24.     comHeader  
  25.   },  
  26.   data: () => ({  
  27.     headerData: {  
  28.       title: '网点详情',  
  29.       toLink: '/SalesOutlets'  
  30.     }  
  31.   }),  
  32.   created () {  
  33.     // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子  
  34.     this.loadMap()  
  35.     // this.ready() // 如果在此处直接调用this.ready()方法，将无法加载地图  
  36.   },  
  37.   mounted () {  
  38.     this.ready()  
  39.   },  
  40.   methods: {  
  41.     loadMap: function () {  
  42.       console.log(this.$route.params.name)  
  43.       console.log(this.$route.params.addr)  
  44.       console.log(this.$route.params.phone)  
  45.       // setTimeout(this.ready, 0)  
  46.     },  
  47.     ready: function () {  
  48.       var map = new BMap.Map('allmap')  
  49.       map.enableScrollWheelZoom(true)  
  50.       console.log(map)  
  51.   
  52.       var localSearch = new BMap.LocalSearch(map)  
  53.       // localSearch.enableAutoViewport() // 允许自动调节窗体大小  
  54.       map.clearOverlays() // 清空原来的标注  
  55.       localSearch.setSearchCompleteCallback(function (searchResult) {  
  56.         var poi = searchResult.getPoi(0)  
  57.         map.centerAndZoom(poi.point, 20)  
  58.         var point = new BMap.Point(poi.point.lng, poi.point.lat)  
  59.         var marker = new BMap.Marker(point) // 创建标注，为要查询的地方对应的经纬度  
  60.         map.addOverlay(marker)  
  61.       })  
  62.       localSearch.search(this.$route.params.addr)  
  63.     }  
  64.   }  
  65. }  
  66. </script>  
  67. <style>  
  68.   /* 去掉地图左下角的百度LOGO */  
  69.   .anchorBL {  
  70.     display:none  
  71.   }  
  72. </style>  

如果直接在实例生命周期的created中调用this.ready()方法将无法加载地图，我在index.html中加入了一个id为allmap的div，当我调用该组件时，该组件上的div没有显示地图，而index.html中id为allmap的div里却显示了地图，经过测试我猜测是因为该组件还没有初始化完毕，导致new BMap.Map('allmap')时实例化地图对象失败。所以应该在实例生命周期的mounted中调用this.ready()方法。

实例生命周期参见：https://vuefe.cn/v2/guide/instance.html#实例生命周期

（4） 在父组件中使用
    a）引入 import BMapComponent from './components/BMapComponent.vue'
    b）在template中增加标签
     <b-map-component></b-map-component>

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

相关推荐