如何在使用Browserify时公开Goog​​le地图的回调函数？

Question

我正在使用Gulp和Browserify捆绑我的JavaScript。我需要公开一个应该在Google Maps API加载后执行的回调函数。

如何在不使用类似window.initMap的情况下完成此操作？问题在于我需要在initMap中激发大量其他方法，因此除了使用window.functionName以及污染全局名称空间之外，还有更好的方法。

另一方面，排除callback参数并改为执行此操作可以吗？

$.getScript('https://maps.googleapis.com/maps/api/js').done(function() { 
    initMap(); 
}); 

任何帮助将不胜感激。我花了更多的时间，我会承认，让这个工作。

gulpfile.js：

gulp.task('browserify', ['eslint'], function() { 
    return browserify('/src/js/main.js') 
    .bundle() 
    .pipe(source('main.js')) 
    .pipe(buffer()) 
    .pipe(gulp.dest('/dist/js')) 
    .pipe(reload({ stream: true })); 
}); 

main.js：

require('jquery'); 
require('./map'); 

map.js：

var map = (function() { 
    'use strict'; 

    var mapElement = $('#map'); 

    function googleMapsAPI() { 
    $.getScript('https://maps.googleapis.com/maps/api/js?callback=initMap'); 
    } 

    function initMap() { 
    var theMap = new google.maps.Map(mapElement); 
    // functions... 
    } 

    function init() { 
    googleMapsAPI(); 
    } 
}); 

map.init(); 

Answer 1

不，不包括callback参数是不行的。

谷歌地图API库调用一系列其他脚本来加载页面，然后，当它们全部加载后，在窗口对象上调用callback参数。

就宣布它window对象：

var MyApp = { 
    init: function() { 
     //all your stuff 
    } 
} 

window.initMap = function() { 
    window.initMap = null; //set this to null this so that it can't get called anymore....if you want 
    MyApp.init(); 
}; 

，然后就在您的网页上的脚本标签：

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 2

老实说，我认为这是一个更好的解决方案，简单地定义一个全球initMap功能可以让事情变得简单，同时利用Google Maps异步初始化。这可能听起来像是黑客，但您可以为该函数定义一个随机名称，然后只要Google Maps SDK调用该名称，就可以将其从全局范围中移除。这种机制与JSONP中使用的机制类似。

var functionName = getRandomName(); 
window[functionName] = function() { 
    window[functionName] = undefined; 
    // call to your initialization functions 
}; 

在this answer你可以检查出的办法，以防止污染全局范围是使谷歌地图脚本负荷同步，有什么会伤害用户体验，特别是在智能手机上。

Answer 3

如果要加载脚本，然后在做一些事情脚本已被加载，您可以在注入script时设置属性async和onload。通过将所有代码包装到IIFE中，我们将保留在IIFE中定义的所有对象的私有，避免填充全局名称空间window。请参阅以下示例：

// IIFE (Immediately-Invoked Function Expression) 
// Keeps all private 
!function() { 
/** 
* Injects the script asynchronously. 
* 
* @param {String} url: the URL from where the script will be loaded 
* @param {Function} callback: function executed after the script is loaded 
*/ 
function inject(url, callback) { 
    var tag = 'script', 
    script = document.createElement(tag), 
    first = document.getElementsByTagName(tag)[0]; 
    script.defer = script.async = 1; // true 
    script.type = 'text/javascript'; 
    script.src = url; 
    script.onload = callback; 
    first.parentNode.insertBefore(script, first); 
} 

/** 
* Injects and initializes the google maps api script. 
*/ 
function injectMapsApi() { 
    var key = 'your-api-key'; 
    var query = '?key=' + key; 
    var url = 'https://maps.googleapis.com/maps/api/js' + query; 
    inject(url, initMapsApi); 
} 

/** 
* Callback that initializes the google maps api script. 
*/ 
function initMapsApi() { 
    var maps = window.google.maps; 
    // ... code initializations 
    console.log(maps); 
} 

injectMapsApi(); 

}(); // end IIFE 

您需要注册并声明您的API密钥才能使用Google Maps API。点击此处了解详情：

• https://developers.google.com/maps/documentation/javascript/get-api-key
• https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相关问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.