javascript - 无效值错误 : myMap is not a function

Question

我想在我的网站上包含一张 map ，但它总是给我一个错误。当我在一个只有 map 代码而没有其他任何东西的普通页面上尝试它时。

HTML:

    <!-- Contact/Area Container -->
<div class="w3-container" id="where" style="padding-bottom:32px;">
    <div class="w3-content" style="max-width:700px">
        <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
        <p>Find us at some address at some place.</p>

        <div id="googleMap" class="w3-sepia" style="width:100%;height:400px;"></div>

            <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggest criteria of them all, both look and taste.</p>
            <p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
            <form action="/action_page.php" target="_blank">
                <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
                <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
                <p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
            </form>
    </div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

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

JavaScript:

function myMap()
{
  myCenter=new google.maps.LatLng(41.878114, -87.629798);
  var mapOptions= {
    center:myCenter,
    zoom:12, scrollwheel: false, draggable: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

  var marker = new google.maps.Marker({
    position: myCenter,
  });
  marker.setMap(map);


}

Answer 1

你的问题是你指的是你的 myMap 函数，在加载定义它的文件之前:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>

这就是为什么您不断得到 myMap is not defined 的原因，因为它的文件还没有被读取。

解决方案:

您的脚本应该反转，在谷歌地图链接中引用 myMap 函数之前包含 script.js:

<script type="text/javascript" src="script.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&callback=myMap"></script>