GoogleMaps不会在页面加载时加载

我无法使用GoogleMaps API V3运行我的地图.地图无法加载.我希望地图显示在带有ID的div中,gisMap但在Chrome调试器中,我收到消息:

Uncaught InvalidValueError: initMap is not a function

使用Javascript

var map;

function initMap() {
    // Enabling new cartography and themes
    google.maps.visualRefresh = true;

    // Setting starting options
    var mapOptions = {
        center: new google.maps.LatLng(39.9078, 32.8252),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Getting Map DOM Element
    var mapElement = document.getElementById('gisMap');

    // Creating a map with DOM element
    map = new google.maps.Map(mapElement, mapOptions);
}

Bundle.js(摘录)

(...)
module.exports = Vue;
}).call(this,require('_process'))
},{"_process":1}],3:[function(require,module,exports){
'use strict';

var map;

function initMap() {
    // Enabling new cartography and themes
    google.maps.visualRefresh = true;

    // Setting starting options
    var mapOptions = {
        center: new google.maps.LatLng(39.9078, 32.8252),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Getting Map DOM Element
    var mapElement = document.getElementById('gisMap');

    // Creating a map with DOM element
    map = new google.maps.Map(mapElement, mapOptions);
}

},{}],4:[function(require,module,exports){
'use strict';

var Vue = require('vue');

new Vue({});
(...)

HTML

SCSS

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "partials/forms";

html, body {
  height: 100%;
  padding-top: 25px;
}

.pageWrapper {
  background-color: red;
  height:100%;
  width: 100%;
}

#gisMap {
  height: 100%;
  width: 50%;
  background-color: green;
}

Marcin Zablo.. 33

确保initMap函数在全局范围内可见,或者作为回调传递给google maps.js的参数是正确命名空间的.在您的情况下,最快的解决方案将取代:

function initMap(){
//..
}

至:

window.initMap = function(){
//...
}

或命名空间版本:

//编辑:

我在你的代码片段中看到你使用了一些异步模块加载(require.js？),并且除非你调用包含这个声明的模块,否则你创建window.initMap函数的代码不会被执行.所以你还没有完成我提到的第一个条件 - 在调用google maps.js之前,initMap必须在全局范围内可见.

确保initMap函数在全局范围内可见,或者作为回调传递给google maps.js的参数是正确命名空间的.在您的情况下,最快的解决方案将取代:

function initMap(){
//..
}

至:

window.initMap = function(){
//...
}

或命名空间版本:

//编辑:

我在你的代码片段中看到你使用了一些异步模块加载(require.js？),并且除非你调用包含这个声明的模块,否则你创建window.initMap函数的代码不会被执行.所以你还没有完成我提到的第一个条件 - 在调用google maps.js之前,initMap必须在全局范围内可见.

只需确保其中包含initMap函数的script元素位于HTML中的google maps api脚本元素之前.此外,Google示例中包含的异步延迟属性可能会导致问题.只需删除这些属性.