javascript - 适用于ASP.NET MVC的Google Maps JavaScript API无法正常工作

我想使用Google Maps JavaScript API在html视图中显示地图。我正在构建一个ASP.NET MVC Web应用程序。我已经包括了参考脚本，initmap（）函数和map div元素。我收到一个错误消息，说``initMap''不是控制台中的函数，这是代码：

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

<div id="map"></div>
<script>
 $(document).ready(function () {
     });
 function initMap() {
                    var uluru = {lat: -25.363, lng: 131.044};
                    var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 4,
                      center: uluru
                    });
                    var marker = new google.maps.Marker({
                      position: uluru,
                      map: map
                    });
                    console.log("Map initialized");
            }

    </script>

编辑：我将initMap（）函数移至$（document）ready（）之外，并且没有错误。但是地图仍然没有显示在屏幕上。

最佳答案

据我所知，maps.googleapis.com中的脚本是调用initMap（）的脚本。

因此，当您在脚本后声明了该函数时，该函数尚不可用。但是他们的脚本中可能已经对此有所保留，但请记住这一点。

我认为这里的真正问题是您正在使用$（document）.ready（）。因此，它来自jQuery，目的是在文档执行之前等待文档准备好用于脚本。

在您的情况下，这意味着它将在设置功能之前等待所有内容加载。 （随之而来的还有一个范围界定问题，但请留待以后再讨论）

因此，只需删除$（document）.ready（）即可，因为Google并未将jQuery用于其API。

另外，请记住，即使您确保将脚本放在页面底部，即使在使用jQuery时也很少需要它。 （有一些例外）

编辑：编辑后，如果仍然收到相同的错误消息，我相信这是脚本顺序。