GoogleMaps 不会在页面加载时加载

IT技术 javascript html google-maps
2021-03-07 12:12:37

我无法使用 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

<!doctype html>
<html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>MFServer Test</title>

    <link rel="stylesheet" href="/css/app.css">
</head>
    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MFDispo</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Start</a></li>
                <li><a href="#about">GIS</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

    <body id="app">
        <div class="pageWrapper">
            <div id="gisMap"></div>
            <div id="content"></div>
        </div>

        <script src="/js/bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap" async defer></script>
    </body>

</html>

社会保障局

@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;
}
6个回答

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

function initMap(){
//..
}

到：

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

或命名空间版本：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>

//编辑：

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

你用的是哪一个？
2021-04-24 12:12:37
您尚未满足“必须在全局范围内可见”的条件。请参阅编辑后的答案。
2021-04-26 12:12:37
window.init 解决方案现在工作得很好！谢谢！
2021-04-27 12:12:37
哦...如果我做 window.onload 而不是 window.initMap 它工作正常
2021-05-03 12:12:37
结果仍然没有改变。我用的是window.initMap 但不幸的是，结果没有改变，地图不可见
2021-05-20 12:12:37

只需确保其中包含 initMap 函数的脚本元素位于 HTML 中的 google maps api 脚本元素之前。此外，Google 示例中包含的 async defer 属性可能会导致问题。只需删除这些属性。

<script src='/js/script.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"></script>
你救了我的一天！！
2021-05-06 12:12:37
在我的 ase 地图添加后开始显示async defer不知道如何？
2021-05-15 12:12:37

尝试：

                                    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=YOUR_API_KEY&signed_in=true">
                                    initMap()
                                    </script>
                                    <div id="map_canvas" style=""></div>
                                    <body id="loadMap" onload="initializeMap(-79, 43,'')"></body>

我遇到过同样的问题。通过移动解决它：

<script src="//maps.googleapis.com/maps/api/js?key=-yourkey-=initMap" async defer></script>

后：

    // Google Map
    function initMap() {
        GoogleMap.initGoogleMap();
    }

希望它对某人有任何帮助......

我有答案:)

一番折腾之后。我已经确定带有您的 Google 地图功能的 js 文件不应该是异步的

所以就我而言

<script async type="text/javascript" src="js/home.js"></script>

变成了

<script type="text/javascript" src="js/home.js"></script>

这并不意味着 Google Maps API 调用不能包含async和/或defer属性！

即，我的调用看起来像这样，并且在本地home.js文件之前

<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap" async defer></script>
其它你可能感兴趣的问题
上一篇如何将按钮值发布到 PHP？ 下一篇jQuery POST，错误 405 方法不允许