Question

我想在我的骨干项目中使用Google图表（对于某些图表）。我正在使用require.js，现在我有问题如何使用require.js加载Google API。

这是官方Google site，提供了如何使用它的基本说明

在阅读这个主题后，我发现许多对here

中找到的require.js插件的引用

那是Miller Medeiros先生:) 我在使用这个脚本时遇到问题：

这就是我所做的。

我从Mr. Miller GIT代表下载了异步脚本，并将其放在我的项目中

在我的main.js中，我将其包含如下：

baseURL: '.',
paths: {
    underscore  : 'lib/underscore',
    backbone    : 'lib/backbone',
    async       : 'lib/async',
    babysitter  : 'lib/backbone.babysitter',
    wreqr       : 'lib/backbone.wreqr',
    marionette  : 'lib/backbone.marionette',
    handlebars  : 'lib/handlebars',
    jquery      : 'lib/jquery', 
},

现在我的问题是如何使用它？我的所有js文件都具有以下结构：

define([
'marionette',
//more defines...    

], function(
  Marionette
//more calls here
) {

如何为我的应用程序提供Google代码？我只需要在一两个地方使用它，就是这样：）

由于

Answer 1

从作者示例中我可以看出，用法似乎是：

require([
    'async!http://maps.google.com/maps/api/js?sensor=false'
], function()
{
    //Google maps is available and all components are ready to use.
    var map = new google.maps.Map( 
    ...

所以在你的情况下可能是这样的

require([
    'async!https://www.google.com/jsapi'
], function()
{
    google.load('visualization', '1.0', {'packages':['corechart']});
    ...

或同样定义here

require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function()
{
    // visualization + corechart + geochart + search are loaded
    // code copied from google charts docs:
    // http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
    var data = new google.visualization.DataTable();

您需要从repo（requirejs-plugins / src）加载goog.js，将其放在lib文件夹中并在路径中将其定义为：

paths : {
    //alias to plugins
    async : 'lib/async',
    goog : ' lib/goog',

Answer 2

假设该库已经与AMD兼容，您可以通过在define（）调用中直接指向它（路径和所有）来使用它：

define([
 'marionette',
 'path/to/google/charts'
], function(Marionette, GoogleCharts) {
  // Stuff
});

现在，如果它不兼容AMD，则需要使用shim。

使用带有Backbone和require.js的谷歌图表

2 个答案: