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

Question

我想使用 Google Maps JavaScript API 在我的 html 视图中显示地图。我正在构建一个 ASP.NET MVC Web 应用程序。我已经包含了参考脚本、initmap() 函数和地图 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() 之外并且没有错误。但是地图仍然没有显示在屏幕上。

Answer 1

据我记得，来自 maps.googleapis.com 的脚本是调用 initMap() 的脚本。

因此，当您在脚本之后声明了该函数时，它还不可用。但他们的脚本中可能已经有一个备用方案，但请记住这一点。

我认为这里真正的问题是您使用的是 $(document).ready()。因此，它来自 jQuery，其目的是等待文档为脚本做好准备，然后再执行。

在您的情况下，这意味着它会在设置功能之前等待所有内容加载。 （还有一个范围问题，但让我们稍后再说）

因此，只需删除它周围的 $(document).ready()，因为 Google 没有将 jQuery 用于他们的 API。

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

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