前端 | 使用 require.js 加载 百度地图

背景

最近在使用百度地图（应用在浏览器端）做些地图方面的应用，我选择了最新的版本，即使用了 2.0 版本，有兴趣的同学可以参看官方文档。

地图 JS 引入方式

引入百度 JS 文件有两种方式：

1. 直接引入

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2. 异步调用（细节不再啰嗦，请查看相关文档）

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, 使用其他框架或者自己直接封装都是同理。