vue使用百度地图报错BMap is not defined问题及解决
作者：未来可期xm 发布时间：2024-04-26 17:42:02
标签：vue,百度地图,报错
使用百度地图报错BMap is not defined
1、在index.html添加
密钥申请：http://lbsyun.baidu.com/apiconsole/key
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script
2、webpack.base.conf.js
externals: {
"BMap": "BMap"
},
vue导入百度地图BMap
在项目的根目录下的index.html文件中添加如下代码
<script src="https://api.map.baidu.com/api?v=2.0&ak=此处填写申请的百度地图AK"></script>
vue项目引入百度地图 报错 BMap未定义;
在经过了多次的测试后,修改webpack等配置文件后,发现了一个十分便捷的处理方法:
首先是在地图加载的方法中打印了window,发现BMap是挂载在window上的,所以直接使用BMap会报错;
在使用的BMap时需要在window身上去找,所以只需要增加以下代码就可以解决BMap is not defined的问题
附完整代码 :
<template>
<div id="map"></div>
</template>
<script>
let BMap = {};
let map = {};
export default {
methods: {
createMap() {
BMap = window.BMap;
map = new BMap.Map("map");
map.centerAndZoom("成都", 11);
},
},
created() {
this.$nextTick(() => {
this.createMap();
});
},
};
</script>
<style scoped>
#map {
width: 100％;
height: 1000px;
}
</style>
来源：https://blog.csdn.net/weixin_44231085/article/details/118600591
0
投稿猜你喜欢
- 这里推荐使用OTK脚本安装Oracle，会大大提高安装Oracle的成功系数。DescriptionoraToolKit is the Sw
有一个同学在Gne的群里面咨询如何通过Selenium获取当前鼠标指向的元素，在我讲了方法以后，他过了两天又来问：那么，我今天就来写一篇文章- 很多书籍里面讲的Python备份都是在linux下的，而在xp上测试一下也可以执行备份功能，代码都差不多相同，就是到执行打包的时候是不一样的
- 本文实例为大家分享了Python代码实现双链表的具体代码，供大家参考，具体内容如下双链表的每个节点有两个指针： 一个指向后一个节点，另一个指
- 高阶函数英文叫Higher-order function。什么是高阶函数？我们以实际代码为例子，一步一步深入概念。变量可以指向函数以Pyth
- Mysql环境变量配置mysql的环境变量配置步骤1.1、在桌面选择“计算机”的图标，右键&
- 本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下<!DOCTYPE html><html&g
- 安装selenium打开命令控制符输入：pip install -U selenium火狐浏览器安装firebug：www.firebug.
- 主要讲 except 和 not in 的性能上的区别。 CREATE TABLE tb1(ID int) CREATE TABLE tb2
- 本文详细讲述了DRF认证组件的原理以及用法.源码剖析讲解DRF版本的时候我们都知道了，在dispatch方法里执行了initial方法来初始
- 本文实例讲述了Python3实现的判断回文链表算法。分享给大家供大家参考，具体如下：问题：请判断一个链表是否为回文链表。方案一：指针法cla
- 二维离散傅里叶变换（DFT）对于二维图像处理，通常使用 x , y x, yx,y 表示离散的空间域坐标变量，用 u , v u,vu,v
- 本文实例讲述了基于wxpython开发的简单gui计算器。分享给大家供大家参考。具体如下：# wxCalc1 a simple GUI ca
- 一、什么是ttkbootstrap？官方文档 [较慢]：https://ttkbootstrap.readthedocs.io/en/lat
- 比如user_num表：例1：查询出现过2次的user往往初学者会错误地认为在where 语句里直接使用count()算法，很显然这个想法是
- 这篇文章主要介绍了python return逻辑判断表达式实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 前言所谓“基础不狠，人站不稳”，对于任何一种编程语言来说基础往往都是重中之重，以Python为例，其
- 题目：给定两个自然数，求这两个数的最大公约数。分析：单看题目的话，非常简单，我们可以循环遍历自然数，如果能够整除两个自然数，就把这个数记下来
- 描述remove() 函数用于移除列表中某个值的第一个匹配项。语法remove()方法语法：list.remove(obj)参数obj --
- 这篇文章主要介绍了Python django框架输入汉字，数字，字符转成二维码实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作
