背景

最近在使用百度地图(应用在浏览器端)做些地图方面的应用,我选择了最新的版本,即使用了 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, 使用其他框架或者自己直接封装都是同理。


青阳半雪
1.6k 声望24 粉丝

现实与完美之间