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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
关于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包里
-
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 图片路径 “@/assets“ 报错问题及解决
目录 问题 解决 为什么 静态导入文件路径 静态导入绝对路径 动态导入相对路径 动态导入绝对路径 问题 在更改背景图片时写的图片相对路径是这样的: 由于@在webpack 被resolve.alias配置下等价于/src,然后直接运行了程序结果报错了 报错状态: 大概意思就是说,无法解析 asset 包 解决 经过查询资料找到了解决办法: 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/asset
-
Vue中引入swiper报错的问题及解决
目录 首先上报错信息 下载swiper6.x版本 首先上报错信息 -----------更新------------------------------------------- 都是由于版本问题惹得锅!!! 刚开始我的swiper安装的是最新版,也就是7.0的版本,但是报各种错,我就降成了6.0的版本. 页面是可以正常显示出来了,但是我的swiper的options配置完全不起作用,不能自动播放,也不显示分页器注意. 查询得知VUE2对于高版本的swiper可能兼容性不好,所以我卸载了6.0的
-
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 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config
-
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
随机推荐
- jqueryUI tab标签页代码分享
- jquery创建并行对象或者合并对象的实现代码
- jQuery简单实现禁用右键菜单
- XENON基于JSON变种
- ionic2 tabs 图标自定义实例
- Asp.net中Response.Charset与Response.ContentEncoding区别示例分析
- destoon会员注册提示“数据校验失败(2)”解决方法
- 在Mac OS上使用mod_wsgi连接Python与Apache服务器
- 详解iOS App开发中session和coockie的用户数据存储处理
- JavaScript实现维吉尼亚(Vigenere)密码算法实例
- Red Hat Linux 安全设置方法
- js中巧用cssText属性批量操作样式
- C#实现字符串倒序的写法
- 用PHP和ACCESS写聊天室(十)
- Android布局之帧布局FrameLayout详解
- java线程池工作队列饱和策略代码示例
- Windows下Anaconda的安装和简单使用方法
- CentOS设置精准时间的方法
- Android Apt之Activity Route的示例
- 详解vuex数据传输的两种方式及this.$store undefined的解决办法