Vue系列:如何将百度地图包装成Vue的组件
来源:互联网 发布:万象ol怎么清除数据库 编辑:程序博客网 时间:2024/05/22 00:07
<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设置高度,否则会看不见
该组件的代码如下
如果直接在实例生命周期的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的组件
- Vue系列:如何将百度地图包装成Vue的组件
- Vue框架中添加百度地图组件
- Vue调用百度地图
- vue加载百度地图
- vue + 百度地图api
- Vue系列: 如何通过组件的属性props设置样式
- 如何将百度地图引入到HTML和VUE文件中?
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue-cli 引入百度地图
- vue中使用百度地图
- vue使用百度地图记录
- 基于Vue 2和高德地图的地图组件
- vue如何划分组件
- 基于Vue 2和高德地图的地图组件 - vue-amap
- Vue进阶系列之组件
- linux下tcp客户端能建立多少个长连接
- AndroidUtils(五)Android图片压缩、旋转工具
- 使用Profiler工具分析内存占用情况
- pthread_detach与pthread_join区别
- 树莓派 Unable to open SPI device: Too many open files 问题解决
- Vue系列:如何将百度地图包装成Vue的组件
- Sublime Text3 必要插件及组件
- 外网访问家庭局域网方案,解决运营商100.x.x.xIP问题
- 方法引用
- 逻辑回归:损失函数与梯度下降
- leetcode492. Construct the Rectangle
- 支持表情存储,修改mysql数据库字符集utf8mb4方式
- Win7+MATLAB2017a+虚拟光驱
- 大数据时代结构化存储云HBase技术架构及最佳实践