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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

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

"></script>


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

externals: {

   "BMap": "BMap" 

}, 


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

    a）使用BMap的时候需要import (经过本人测试，如果不用import会提示BMap未定义)

  

 

    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的组件 的全部内容， 来源链接： utcz.com/z/376158.html

回到顶部