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

背景

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

地图 JS 引入方式

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

1. 直接引入

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