vue使用百度地图报错BMap is not defined问题及解决

目录
  • 使用百度地图报错BMap is not defined
  • vue导入百度地图BMap

使用百度地图报错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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于Vue ui 的没反应、报错问题解决总结

    目录 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 Vue ui无法启动项目管理器 原因 遇到版本低的解决方案 没有ui功能的解决方法 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 vue ui 输入后 回车没反应? cmd 输入: vue ui // 没反应 原因一:安装的 nodejs 和 node_modules(有npm) 没有在同一个目录下: 安装时会默认安装在"C:\Program Files…"里的. 解决: (1)卸载

  • vue报错Failed to execute 'appendChild' on 'Node'解决

    目录 一.问题描述 二.解决过程 一.问题描述 某天在开发需求时发现,业务页面上报告了一个Script error. 由于vconsole看不到详细报错信息,于是在chrome上打开,具体报错信息如下: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild 看起来是vue2.6.12包里

  • Vue中引入swiper报错的问题及解决

    目录 首先上报错信息 下载swiper6.x版本 首先上报错信息 -----------更新------------------------------------------- 都是由于版本问题惹得锅!!! 刚开始我的swiper安装的是最新版,也就是7.0的版本,但是报各种错,我就降成了6.0的版本. 页面是可以正常显示出来了,但是我的swiper的options配置完全不起作用,不能自动播放,也不显示分页器注意. 查询得知VUE2对于高版本的swiper可能兼容性不好,所以我卸载了6.0的

  • vue 图片路径 “@/assets“ 报错问题及解决

    目录 问题 解决 为什么 静态导入文件路径 静态导入绝对路径 动态导入相对路径 动态导入绝对路径 问题 在更改背景图片时写的图片相对路径是这样的: 由于@在webpack 被resolve.alias配置下等价于/src,然后直接运行了程序结果报错了 报错状态: 大概意思就是说,无法解析 asset 包 解决 经过查询资料找到了解决办法: 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/asset

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

  • vue使用百度地图报错BMap is not defined问题及解决

    目录 使用百度地图报错BMap is not defined vue导入百度地图BMap 使用百度地图报错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

  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config

  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    目录 Vue集成百度地图实现位置选择 百度地图选择地址效果 集成百度地图的具体实现 第一步:引入百度地图 JavaScript API v3.0 文件 第二步:编写百度地图选择位置组件 第三步:使用百度地图选择位置组件 百度地图Web开发 参考文章 Vue集成百度地图实现位置选择 需求:添加门店时,需要选择门店的省.市.区.详细地址.以及门店的经纬度信息. 解决方案:集成百度地图API,通过在地图上搜索或者点击获取门店的具体位置信息. 百度地图选择地址效果 具体效果如下图所示 集成百度地图的具体

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • 解决Vue项目中tff报错的问题

    在webpack.config.js中的模块配置中加如下的配置规则: {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"} const path = require('path'); const htmlWebpackplugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); modu

  • vue之webpack -v报错解决方案总结

    小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本 又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa

  • vue项目依赖升级报错处理方式

    目录 vue项目依赖升级报错处理 当启动vue项目安装依赖时报错 vue项目依赖升级报错处理 1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation 原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生 import Vue from 'vue'

  • vue中百度地图定位及附近搜索功能使用步骤

    目录 1.地图初始化相关 2.获取当前定位 3.根据当前定位地址附近搜索建议 1.地图初始化相关 文档:lbs.baidu.com/index.php?t… 申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 在出口html(public/html)文件下引入标签 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&

  • mysql登录报错提示：ERROR 1045 (28000)的解决方法

    本文分析了mysql登录报错提示:ERROR 1045 (28000)的解决方法.分享给大家供大家参考,具体如下: 一.问题: 公司linux系统的mysql数据库root用户设置过密码,但常常用命令'mysql -u root -p'登录报错,有时又能登录.登录报错信息为: [root@localhost ~]# mysql -u root -p Enter password: ERROR 1045 (28000): Access denied for user 'root'@'localho

随机推荐