如何将百度地图包装成Vue的组件的方法步骤

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何将百度地图包装成Vue的组件的方法步骤，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2585字，纯文字阅读大概需要4分钟。

内容图文

（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设置高度，否则会看不见

该组件的代码如下

<!-- 页面模版 -->
<template>
 <div>
  <!--header-->
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
  <!--header end-->
 
  <!--container-->
  <div id="allmap" 
      style="
        width: 100%; 
        height:200px; 
        border: 1px solid gray;
        overflow:hidden;">
    </div>
  <!--container end-->
 </div>
</template>
<script>
import comHeader from 'components/comHeader'
import BMap from 'BMap'
export default {
 components: {
  comHeader
 },
 data: () => ({
  headerData: {
   title: '网点详情',
   toLink: '/SalesOutlets'
  }
 }),
 created () {
  // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子
  this.loadMap()
  // this.ready() // 如果在此处直接调用this.ready()方法，将无法加载地图
 },
 mounted () {
  this.ready()
 },
 methods: {
  loadMap: function () {
   console.log(this.$route.params.name)
   console.log(this.$route.params.addr)
   console.log(this.$route.params.phone)
   // setTimeout(this.ready, 0)
  },
  ready: function () {
   var map = new BMap.Map('allmap')
   map.enableScrollWheelZoom(true)
   console.log(map)
 
   var localSearch = new BMap.LocalSearch(map)
   // localSearch.enableAutoViewport() // 允许自动调节窗体大小
   map.clearOverlays() // 清空原来的标注
   localSearch.setSearchCompleteCallback(function (searchResult) {
    var poi = searchResult.getPoi(0)
    map.centerAndZoom(poi.point, 20)
    var point = new BMap.Point(poi.point.lng, poi.point.lat)
    var marker = new BMap.Marker(point) // 创建标注，为要查询的地方对应的经纬度
    map.addOverlay(marker)
   })
   localSearch.search(this.$route.params.addr)
  }
 }
}
</script>
<style>
 /* 去掉地图左下角的百度LOGO */
 .anchorBL {
  display:none
 }
</style>

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

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

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

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

     

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的如何将百度地图包装成Vue的组件的方法步骤全部内容，希望文章能够帮你解决如何将百度地图包装成Vue的组件的方法步骤所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---