怎样将百度地图包装成Vue的组件-成都快上网建站

怎样将百度地图包装成Vue的组件

这篇文章给大家分享的是有关怎样将百度地图包装成Vue的组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

公司主营业务:网站建设、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出峨山县免费做网站回馈大家。

(1)在index.html文件中引入百度地图

怎样将百度地图包装成Vue的组件

(2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;

externals: {
  "BMap": "BMap" 

},

怎样将百度地图包装成Vue的组件

(3)添加地图组件BMapComponent.vue,这里主要注意两点:

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

怎样将百度地图包装成Vue的组件    

b)注意一定要给bmap的div设置高度,否则会看不见

该组件的代码如下




如果直接在实例生命周期的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中增加标签

怎样将百度地图包装成Vue的组件

感谢各位的阅读!关于“怎样将百度地图包装成Vue的组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前题目:怎样将百度地图包装成Vue的组件
网页路径:http://kswjz.com/article/jeddgd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流