使用requirejs 调用百度地图解决方案
来源:互联网 发布:关于网络暴力的数据 编辑:程序博客网 时间:2024/06/05 16:19
百度地图的模块化加载方案
百度地图的加载方式比较奇葩,比如百度提供的一个 js 脚本地址是这样http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM
,直接使用浏览器访问,这个文件的内容是这样:
(function () { window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM&services=&t=20160503160001"></script>');})();
百度地图通过一个脚本再去请求另外一个脚本,这样的方式可能是我见的少吧,感觉这样会比较安全。
在直接访问后面这个网址,得到的就是真正的百度地图api
文件了。
看起来好像直接转成 requirejs 加载的方式没有问题,那就试试?
// requirejs 的配置,因为百度地图是非AMD模式的,所以需要加上shim进行转换require.config({ paths: { 'BMap': ['http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM'], }, shim: { 'BMap': { deps: ['jquery'], exports: 'BMap' } }});
// 调用百度地图define(['jquery','BMap'], function(){ var map = new BMap.Map("map");});
来了来了,控制台非常精准的出现了错误:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.ReferenceError: BMap is not defined(…)defineUncaught ReferenceError: BMap is not defined
第一个和第四个是控制台打印出来的错误信息,中间两个是 requirejs 打印出来的错误信息。其中第一个错误只是黄色的感叹号(因为当前请求的文件已经加载,大概是提醒你异步加载的文件是不能再请求脚本的);最后一个错误是红色的叉,因为这里找不到BMap
这个对象。
好了,大概问题知道了。如何解决?
经过大量的查找,发现 requirejs 有async
这样一个插件,附上 requirejs 插件列表:https://github.com/requirejs/requirejs/wiki/Plugins
这个插件可以使当前加载的 js 脚本采用异步的方式加载更多的脚本文件,官方原话是这样的:
async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).
所以配置好 async.js
require.config({ paths: { 'async': '../../lib/require/async' }}
调用百度地图的时候这样写:
// 调用百度地图define(['jquery','async!BMap'], function(){ var map = new BMap.Map("map");});
这样就能成功的使用模块化的技术调用百度地图了
附上个人博客对应博文地址:
http://lancelot_lewis.coding.me/2016/05/24/requirejs/requirejs-map/
- 使用requirejs 调用百度地图解决方案
- RequireJS模块化开发百度地图
- c#,winform调用百度地图及“BMap”未定义错误解决方案
- Ionic 调用百度插件和使用百度地图
- 调用百度地图
- 调用百度地图
- 调用百度地图实例
- 调用百度地图
- js调用百度地图
- 调用百度地图APP
- 百度地图接口调用
- 调用百度地图
- 百度地图调用示例
- 调用百度地图
- 百度地图URL调用
- 怎么调用百度地图
- vs2010MFC调用百度地图
- 百度地图api调用
- 二项队列
- iOS NSDate 转换成星期
- Quartz 2D的坐标系和UIKit的坐标系对比以及相互转换 ? 赶驴记
- 关于iOS自定义字体
- 【Android】状态栏通知Notification、NotificationManager详解
- 使用requirejs 调用百度地图解决方案
- Qt布局管理: 分割窗口QSplitter类讲解(纯代码实现分割窗口)
- hdu 1546 Idiomatic Phrases Game(最短路)
- 高效使用Bitmaps(二) 后台加载Bitmap
- leetcode 14:Longest Common Prefix
- poj1988 Cube Stacking(关系并查集)
- css 常用图形
- 使用OBS+Azure Media Service+CDN进行直播,配置方法及最佳实践
- openBTS编译指南