javascript - Google map API - 'google' 未定义 - MVC5 javascript

Question

我收到 JavaScript“google 未定义”错误。

如果这个问题与this类似，我深表歉意。但我在不同的设置中使用它，所以这可能是 MVC 问题。

我使用MCV5网站标准模板，并将其放入_layout.chtml主模板的头部:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

此代码进入帐户/索引操作的 View 之一:

<div id="map_canvas"></div>
<span id="result"></span>
<script>
    var map = null;
    var markersArray = [];

    function initialize() {

        var latlng = new google.maps.LatLng(13.73868, 1.07143);

        var settings = {
            zoom: 14,
            center: latlng,
            mapTypeControl: true,
            scaleControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            backgroundColor: 'white'
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), settings);
        google.maps.event.addListener(map, 'click', function (event) {
            document.getElementById('result').innerHTML = 'Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng();
        });
    }

    window.onload = initialize;

</script>

不知何故，在函数initialize()运行时，链接的google js文件似乎没有加载，并且我在initialize()函数的第一行中收到JavaScript“google is undefined”错误。

感谢您的帮助。

Answer 1

MVC 唯一可能出现问题的地方是布局的加载。您是否检查过页面源代码以确保 Google Maps API 脚本确实位于页面上？如果不是，那么您只需要弄清楚为什么您的 View 没有使用您认为应该使用的布局。

如果它在页面上，则打开 JS 文件的链接并确保其正确加载。特别是如果您在公司网络上，有时防火墙或其他安全软件可能会阻止某些脚本正确加载。如果是这种情况，您需要与基础设施部门合作。

此外，请注意 SSL 的使用。如果您在加载该脚本的网站上使用 SSL，则该脚本将不会加载，因为它是通过 HTTP 而不是 HTTPS 进行的。一般来说，最好使用外部资源的 HTTPS 版本，因为无论您的网站在 HTTPS 还是 HTTP 上运行，它都应该有效。另外，您可以使 URL 协议(protocol)相对:

<script src="//maps.google.com/maps/api/js?sensor=false"></script>

假设这不是第三方使用完全不同的 SSL 域的烦人实例之一，那么它将根据您的网站使用的内容请求 HTTP 或 HTTPS。