Question

我遇到了众所周知的问题initMap is not a function，我真的不知道如何解决它。我尝试过在其他问题中推荐的各种方法，但没有一种方法有效。我发现唯一合理的解决方案是使用 AngularJS ，但我试图在没有它的情况下完成脚本。

这是我的HTML代码：

<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src ="script.js" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href ="style.css">
</head>
    <body>
    <div id ="map-canvas"> </div>
    </body>
</html>

JS代码：

window.initMap = function() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      };

对于JS代码，我实际上复制并粘贴了Google文档中的内容，并在此处进行了一些小的更改window.initMap = function()。

我尝试过的事情：

将function initMap()更改为window.initMap = function()
删除initMap()中的所有内容并将其alert("ok")给予查看如果它会出现。好吧，它没有。
将async defer的位置更改为脚本引用的末尾，同时将脚本引用放在最顶层。

我已详细检查过的问题：

First try，Second，Third time wasn't the charm

我得到的错误消息：

我的地图没有呈现，我不断收到此错误，有任何想法如何解决？

Answer 1

两个问题：

添加缺少的</script>代码
更改页面加载的顺序：

<div id="map-canvas"> </div>
<script src="script.js" defer async></script>
<script async defer 
  src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>

Answer 2

尝试从此

更改脚本的顺序

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src ="script.js" />

到此

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

        <script src ="script.js" />
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

因此，在GMaps api加载之前定义initMap函数

initMap不是一个函数 - map不能渲染。 Google Maps API - JS

2 个答案: