vue 异步引入百度地图，不在index.html引入（不在登录页加载地图）

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量332 收藏 1
点赞数 1
分类专栏： 百度地图 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zkkwe/article/details/131532230
版权

遇到一个需求是要求再登录页的时候不要加载地图api,因此考虑到异步加载地图

1.在项目中先创建一个baiduMap.js文件 （放哪里都可以）

画箭头的两个地方一定要统一，要不引入地图会报错

 2.在要使用地图的组件中引入MP方法

 

3.在mounted中传入申请的ak，去调用地图

 

百度地图异步引入就可以正常使用了 

zkkwe
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图的异步加载方法
Mantana的博客
02-23 729
异步加载目的是在一些场景下，提升网页的渲染性能。 普通同步加载代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
Vue组件单独引入百度地图，不在index.html引入
weixin_44381909的博客
05-08 1081
1：问题 在日常项目中，通常引入百度地图的方法有 在index.html引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=*******"></script> 但vue项目中仅某一两个页面需要用到百度地图，所以不想在 index.html 中全局引用 这是就用...
百度地图测加载的两种 方式 直接加载和异步加载
y19910825的博客
06-09 1788
百度地图测加载的两种 方式 直接加载和异步加载 转自：http://blog.csdn.net/u014470581/article/details/52780881 1、直接加载 [html] view plain copy html>  head>      meta http-equiv="Content-Type" content="text/ht
vue在index.html中引入静态文件不生效问题及解决方法
10-17
主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
vue中引入百度地图，以及解决地图出现undefined（地图未定义）
热门推荐
七侠剑客的博客
04-20 1万+
vue中引入百度地图，以及防止地图出现undefined（地图未定义）      最近有个项目需要使用百度地图，于是自己尝试在先写个demo进行测试，主要体现在下面两种方法： 第一种方法： 在index.htm引入 查看其它文章发现，要在在build文件下的webpack.base.conf.js配置map，个人尝试是否配置无作用 开始实例化生...
百度地图异步加载
weixin_45816407的博客
05-23 214
【代码】百度地图异步加载。
百度地图的异步加载
TianYu0-0的博客
03-24 1191
百度地图的异步加载异步加载目的解决方案完整代码 异步加载 目的 因为百度地图组件是异步加载，如果在vue里的mounted生命周期里创建地图实例，会报错：BMap is not defined。 所以需要解决这个问题，使用异步加载。 解决方案 以下解决方案全部以vue代码为例。 首先在src/assets文件夹中创建一个map.js。 map.js里的代码如下： export default { init: function () { console.log("初始化百度地图脚本.
vue3中百度地图的使用
qq_52499093的博客
08-18 3757
vue3中百度地图自定义窗口的简单使用
百度地图异步加载实现
qq_41029007的博客
05-10 1028
百度地图异步加载实现
详解vue.js下引入百度地图jsApi的两种方法
10-18
主要介绍了详解vue.js下引入百度地图jsApi的两种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue异步加载高德地图的实现
08-27
主要介绍了vue异步加载高德地图的实现，详细的介绍了异步加载的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Vue引入百度地图JSSDK：BMap is undefined 问题
weixin_45252024的博客
03-04 1171
百度地图官网文档介绍使用JSSDK时，仅提供了2种引入方式： script引入 异步加载 但vue项目中仅某一两个页面需要用到百度地图，所以不想在 index.html 中全局引用。 那在单个vue组件页面中如何引入呢？ 刚开始时，是直接通过 DOM 操作方式插入script标签到当前document中，如下： let scriptNode = document.createElement("script"); scriptNode.setAttribute("type", "text/javascri
vue项目中使用百度地图（一）
sw_小七奥特曼的博客
08-23 3071
vue+百度地图的基础使用。
如何在Vue项目中使用百度地图（实践）
bug处理进行时
03-11 6273
百度地图在vue框架中的使用 文章目录百度地图在vue框架中的使用安装注册全局注册组件局部注册使用（以局部注册为例）注意事项自己开发中踩到的坑参考链接 安装 npm install vue-baidu-map --save 注册 全局注册 在main.js中引入百度地图 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap , { a...
Vue项目引入百度地图
weixin_30871293的博客
08-01 298
先去百度开放平台申请ak。http://lbsyun.baidu.com/ 进来之后 按照步骤走，先登录百度账号，然后申请成为开发者，然后申请ak密钥 填写完毕后提交，会给你邮箱发个激活邮件 点击申请密钥 然后点击提交 这个时候，你就可以拿着这个ak去使用百度地图了。 使用 执行 npm install vue...
vue中使用百度地图
ybp500234的博客
10-28 6684
v=1.0&type=webgl&callback=initBMap&ak=自己的ak。v=2.0&callback=initBMap&ak=自己的ak。是你自己申请的地图ak，你也可以直接写在方法里面，就不用以参数的形式传入；这里我们之前是直接在html中引用的，现在我们通过异步加载的方式;这里需要注意的是：百度地图有两个初始华对象，一个是。
vue中百度地图GL异步加载
weixin_45979310的博客
12-16 1273
新建 loadBmap.js 文件，内容如下： /** * @description 加载百度地图基础组件js */ export function asyncLoadBaiduJs () { return new Promise((resolve, reject) => { if (typeof BMapGL !== 'undefined') { resolve(BMapGL) return true } window.onBMapCallba
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 371
注释很详细，直接上代码……
vue 异步加载高德地图
10-13
可以使用高德地图的异步加载方式来在 Vue 中使用高德地图。具体步骤如下： 1. 在 index.html 中引入高德地图的 JS API： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script> ``` 2. 在 Vue 组件中使用 `mounted` 钩子函数来初始化地图： ```javascript mounted() { // 创建地图实例 const map = new AMap.Map('map-container', { zoom: 10, center: [116.39, 39.9] }); } ``` 3. 在模板中添加地图容器： ```html <template> <div id="map-container"></div> </template> ``` 其中，`yourkey` 是你的高德地图开发者密钥。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值