背景
最近在使用百度地图(应用在浏览器端
)做些地图方面的应用,我选择了最新的版本,即使用了 2.0
版本,有兴趣的同学可以参看官方文档。
地图 JS
引入方式
引入百度 JS
文件有两种方式:
-
直接引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
异步调用(细节不再啰嗦,请查看相关文档)
require.js 组织和封装
如果直接使用第一种方式,会对前端性能有所影响,总觉得不干净,心里会很不舒服,所以决定采用异步调用
前端的 JS
文件组织我采用了 require.js
(追求完美的同学可以看下 webpack
等等)
考虑到 require.js
的特性,决定采用异步
调用进行封装,JS 前端框架使用了 Backbone
封装代码
define([
'jquery',
'backbone'
], function($) {
"use strict";
widgetMap = Backbone.View.extend({
initialize: function(options) {
var obj = this;
obj._initBDMapCallBack();
obj._loadBDMap();
},
/**
* @description 异步载入百度地图
*/
_loadBDMap: function() {
var obj = this
, script = document.createElement("script")
;
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=MapCallback";
document.body.appendChild(script);
},
/**
* @description 设置地图回调函数
*/
_initBDMapCallBack: function() {
var obj = this
window.MapCallback = function() {
// 借鉴单例模式
obj.map = new BMap.Map("allmap")
obj.point = new BMap.Point(116.404, 39.915);
obj.map.centerAndZoom(obj.point,15);
obj.map.enableScrollWheelZoom();
}
}
});
return widgetMap;
});
调用代码
require(['widgets/map'], function(widgetMap) {
new widgetMap({
el: '#xxx'
});
});
注意
测试发现,当前例子值适合在页面中载入一个地图,如果需要在同一页面同时载入多个地图视图,就需要加入各种实例化参数判断检测等等
其他
此只是一个简易的如何使用 require.js
例子说明,这里使用了 Backbone
, 使用其他框架或者自己直接封装都是同理。