为什么Google Maps API的方法在RequireJS中调用不正确？

问题描述：

我试图将我的JS代码移入RequireJS，但有一些困难。在我有一个功能是负责我的表单的输入域初始化谷歌地图API的地方自动填充的模块之一：为什么Google Maps API的方法在RequireJS中调用不正确？

define(
    ['jquery'], 
    function($) { 
     return { 
      ... 
      autocomplete_init : function(autocomplete_element, place_id_element) { 
       var input = $('#'+autocomplete_element); 

       autocomplete = new google.maps.places.Autocomplete(input, 
        { types: ['(cities)'] } 
       ); 

       google.maps.event.addListener(autocomplete, 'place_changed', function() { 

        var place = autocomplete.getPlace(); 

        $('#'+place_id_element).val(place.place_id); 
       }); 
      }, 
      ... 
     } 
    } 
);

功能autocomplete_init从连接到API另一个模块调用：

require.config({ 
    baseUrl: 'js/lib', 
    paths: { 
     'app': '../app', 
     jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min', 
     async: 'require/async', 
     'maps-api': 'https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places', 
    }, 
    shim: { 
     'maps-api': { 
      deps: [] 
     }, 
     'destinations-map': { 
      deps: ['jquery', 'async!maps-api'] 
     }, 
    }, 
}); 

require(
    ['jquery', 'app/form', 'destinations-map'], 
    function($, form){ 
     ... 
     // form - это модуль, в котором хранится показанная выше функция 
     form.autocomplete_init('location_input', 'destination_place_id'); 
    } 
);

模块目标地图通过填充程序连接，也可以与Google Maps API协同工作，它会在地图上制作标记。它工作并成功。与此同时，当我运行上面显示的“autocomplete_init”时，autocomplete不起作用，但是，在控制台中有一个错误，指示一些加载的最小化JS脚本，所以我找不到这个错误究竟意味着什么。

screenshot

但你可以从错误中，我的代码的最后一行，在这之后开始徘徊在谷歌API的荒野看到如下：函数autocomplete_init，具体而言，以下line：

autocomplete = new google.maps.places.Autocomplete(input, 
    { types: ['(cities)'] } 
);

告诉我，出了什么问题，以及如何解决它？如何让Google Maps API的Place Autocomplete开始使用RequireJS？

答

您需要在URL参数中指定回调函数（&callback=<functionname>）。就像这样：

'async!http://maps.google.com/maps/api/js?v=3&libraries=places!callback'

否则，您可以使用$.Deferred()懒加载地图。 This博客文章详细解释它。

希望它有帮助！

为什么Google Maps API的方法在RequireJS中调用不正确？

相关推荐