Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/sql-server-2008/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用webpack时,Google Maps无法访问回调函数_Javascript_Google Maps_Callback_Webpack - Fatal编程技术网

Javascript 使用webpack时,Google Maps无法访问回调函数

Javascript 使用webpack时,Google Maps无法访问回调函数,javascript,google-maps,callback,webpack,Javascript,Google Maps,Callback,Webpack,我正在使用webpack使用GoogleMaps构建一个小项目,由于webpack构建脚本的方式,我在Google访问回调函数时遇到了问题。让google访问回调函数的唯一方法是手动将其移动到webpack构建的全局范围。我想知道是否有其他方法可以编写它,这样我就不需要手动更改捆绑文件 预构建: import {apiKey} from './apiKey'; document.addEventListener('DOMContentLoaded', function(){ let lang

我正在使用webpack使用GoogleMaps构建一个小项目,由于webpack构建脚本的方式,我在Google访问回调函数时遇到了问题。让google访问回调函数的唯一方法是手动将其移动到webpack构建的全局范围。我想知道是否有其他方法可以编写它,这样我就不需要手动更改捆绑文件

预构建:

import {apiKey} from './apiKey';

document.addEventListener('DOMContentLoaded', function(){

let lang;

if(document.querySelectorAll('#map').length > 0){
    if(document.querySelector('html').lang){
        lang = document.querySelector('html').lang;
    } else {
        lang = "en";    
    }

    let js_file = document.createElement('script');
    js_file.type = "text/javascript";
    js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + apiKey + '&language=' + lang;
    document.getElementsByTagName('head')[0].appendChild(js_file);
};



});

   let map ;

   function initMapCallback() {
      map = new google.maps.Map(document.getElementById("map"), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 8
      });
   ;
建造后:

/* 0 */
/***/ function(module, exports, __webpack_require__) {

'use strict';

var _apiKey = __webpack_require__(1);

var map = void 0;

function initMapCallback() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
};

document.addEventListener('DOMContentLoaded', function () {

    var lang = void 0;

    if (document.querySelectorAll('#map').length > 0) {
        if (document.querySelector('html').lang) {
            lang = document.querySelector('html').lang;
        } else {
            lang = "en";
        }

        var js_file = document.createElement('script');
        js_file.type = "text/javascript";
        js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + _apiKey.apiKey + '&language=' + lang;
        document.getElementsByTagName('head')[0].appendChild(js_file);
    };
});

  /***/ },
  /* 1 */
 /***/ function(module, exports) {

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var apiKey = exports.apiKey = 'something';

/***/ }
/******/ ]);

在IIFE中使用webpack时,所有代码都在全局范围之外运行。如果您想显式地使某些内容可用,您可以自己将其附加到窗口

只需在函数定义后添加以下内容:

window.initMapCallback = initMapCallback;
或者在一行中完成:

window.initMapCallback = function initMapCallback() { /* ... */ };

就这样

在生活中使用webpack时,所有代码都在全局范围之外运行。如果您想显式地使某些内容可用,您可以自己将其附加到窗口

只需在函数定义后添加以下内容:

window.initMapCallback = initMapCallback;
或者在一行中完成:

window.initMapCallback = function initMapCallback() { /* ... */ };
就这样