异步加载百度地图

最新推荐文章于 2024-11-01 15:39:30 发布
最新推荐文章于 2024-11-01 15:39:30 发布
阅读量2.4k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 百度地图 文章标签： 百度地图 BMap 异步加载 初始化 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/leeleejoker/article/details/80596345
这篇博文主要介绍了在Vue项目中如何异步加载百度地图API，并进行初始化操作。作者强调了官方API的重要性，并提供了无密钥API的临时使用地址以及正式项目中获取密钥的申请流程。博客内容分为两部分，详细讲解了异步加载地图的实现方法，适用于需要在Vue组件中按需加载地图的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开始我的第一篇前端技术相关博文，最近又在弄百度地图，遇到一些小坑或者值得记录的代码或流程步骤，新鲜热辣记录一下~骂人

首先先把百度地图官方API推出来（JavaScript API）： http://lbsyun.baidu.com/index.php?title=jspopular

官方API还是相当有用的，当然有时候场景不同，可能会有报错需要略微改变写法，以下是结合#vue#使用百度地图的实例，都是我自己写代码实践过的~

 

===============Part 1==============分割线===================

 

（以上截图为百度地图官方文档）

 

首先分享一个v1.2版不用密钥就可  #导入百度地图API文件#  的地址 http://api.map.baidu.com/api?v=1.2

 

这个仅供自己开发阶段试验的，正式项目开发建议还是去申请密钥ak，还是很容易申请的~

申请流程见官方：

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue中异步加载百度地图api及js中调用百度地图API
爱笑的刚刚的博客
07-28 2232
vue中加载百度地图 1.创建map.js 文件 js文件名随便 export default function loadBMap(ak) { return new Promise(function(resolve, reject) { if (typeof BMap !== 'undefined') { resolve(BMap) return true } window.onBMapCallback = function(
vue中百度地图GL异步加载
weixin_45979310的博客
12-16 1405
新建 loadBmap.js 文件，内容如下： /** * @description 加载百度地图基础组件js */ export function asyncLoadBaiduJs () { return new Promise((resolve, reject) => { if (typeof BMapGL !== 'undefined') { resolve(BMapGL) return true } window.onBMapCallba
vue中异步加载百度地图及相关资源
Vanilla1119的博客
04-03 2314
vue中异步加载百度地图及相关资源 官网加载百度地图基础API都是index.html直接加script，包括点聚合API也是这种方式。 但实际应用中，有时候只有一个页面需要到百度地图，没必要全局都加载百度地图的文件，会增加负担. 因此介绍vue中如何异步加载百度地图及其相关资源（比如百度地图的点聚合API也需要加载进来js文件） 我们来对比一下： 一般加载： <!-- index.ht...
引入百度地图异步加载
weixin_33971130的博客
07-14 227
2019独角兽企业重金招聘Python工程师标准>>> ...
百度地图异步加载实现
qq_41029007的博客
05-10 1232
百度地图异步加载实现
百度地图的异步加载方法
Mantana的博客
02-23 837
异步加载目的是在一些场景下，提升网页的渲染性能。 普通同步加载代码： <!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异步加载百度地图
热门推荐
寻梦无痕
11-05 1万+
网上搜了不少资料都是index.html直接加script，个人是不喜欢这种方式，毕竟有时候只有一个页面需要到百度地图，没必要全局都加载百度地图的文件 单独新建一个js文件：loadBMap.js，名字随意取，位置可以随便放 export default function loadBMap(ak) { return new Promise(function(resolve, reject) {...
百度地图之异步加载
李 克 鹏 的 博客
03-25 357
完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <style> html, body { width:100%; height:100%; padding:0; margin:0; } #map { width:100%;
百度地图异步加载
jieyucx的博客
03-28 262
v=1.0&&type=webgl&ak=秘钥&callback=init"
百度地图的异步加载
TianYu0-0的博客
03-24 1371
百度地图的异步加载异步加载目的解决方案完整代码 异步加载 目的 因为百度地图组件是异步加载，如果在vue里的mounted生命周期里创建地图实例，会报错：BMap is not defined。 所以需要解决这个问题，使用异步加载。 解决方案 以下解决方案全部以vue代码为例。 首先在src/assets文件夹中创建一个map.js。 map.js里的代码如下： export default { init: function () { console.log("初始化百度地图脚本.
百度地图实用案例
m0_57479235的博客
12-07 223
1、创建一个js文件 export function BMPGL(ak) { return new Promise(function (resolve, reject) { window.init = function () { // eslint-disable-next-line resolve(BMapGL) } const script = document.createElement('scri
Vue中加载百度地图
weixin_30562507的博客
05-04 152
近期新项目使用了vue，因为涉及到物流配送，需要获取用户的位置坐标，要借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式：通过promise以及百度地图的callback回调函数 map.js export function MP(ak) { return new Promise(function (resolve, rejec...
百度地图异步加载loadScript()函数
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
05-21 562
function loadScript() { var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=2.0&ak=2337624829697af4d7d4884ea113c174&callback=initialize"; document.body.appendChild(script); } window.onload
vue 异步引入百度地图，不在index.html引入（不在登录页加载地图）
zkkwe的博客
07-04 509
vue 异步引入百度地图，不在index.html引入（不在登录页加载地图）
required.js异步加载百度地图
paulxu_1008的博客
11-20 285
require.config({ paths: { jquery: “…/jquery-1.8.3.min”, async:&quot;…/thirdparty/async&quot;, BMap:“百度的key” }, //指定模块依赖关系 shim:{ “jquery_ui”: [“jquery”], ‘BMap’: { deps: [‘jquery’], exports: ‘BMap’ } }, waitSec...
高德、百度第三方地图异步加载API
最新发布
ltc_Yan的博客
11-01 452
高德、百度第三方地图异步加载API
Angular2实现的百度地图异步加载组件
Angular2百度地图组件的开发涉及到了前端框架Angular2的应用、地图服务集成、组件化开发理念、异步加载机制以及TypeScript编程实践等多方面的知识。通过本知识点梳理，开发者应该能够更好地理解如何将百度地图集成到...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值