使用webpack時Google Maps無法訪問回調函數

我正在使用webpack使用Google Maps來構建一個小型項目，而且由於webpack構建腳本的方式而導致Google到達回調函數時出現問題。我可以讓google到達回調函數的唯一方法是通過手動將其移動到webpack構建的全局範圍中。我想知道是否有反正我可以寫它不同，所以我不需要手動改變捆綁文件。使用webpack時Google Maps無法訪問回調函數

預建：

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'; 

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

來源

2016-07-29 2K01B5

所有的代碼在全球範圍之外運行時使用的WebPack，在IIFE。如果你想明確地提供一些東西，你可以把它附在窗口上。

只需添加下面的函數定義後：

window.initMapCallback = initMapCallback;

或者做一個行：

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

就是這樣！

來源

2016-07-29 15:05:48 Ambroos

使用webpack時Google Maps無法訪問回調函數

回答

相關問題