Question

考虑以下脚本（同样在http://jsbin.com/yegike/1/）。如果我在包含Google地图链接之前尝试创建变量map，则会出现ReferenceError: google is not defined错误。如果不在脚本之前移动链接，是否可以消除此错误？即使答案是＆＃34; no＆＃34;，我也会很感激对正在发生的事情的解释。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <style type="text/css">
        </style> 
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script> -->
        <script>
            (function($){
                var map = new google.maps.LatLng(47.64864, -122.348927);
                }(jQuery));
        </script>
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
    </body> 
</html>

Answer 1

也许试试这个等待页面加载，如果谷歌需要一段时间加载，那么它会再试一次：

var map;
function makeMap() {
  if (google && google.maps) { // google loaded?
    map = new google.maps.LatLng(47.64864, -122.348927);
    return;
  }
  setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
   makeMap();         
});

Answer 2

您尝试在google命名空间中调用名为maps的方法，该方法在已注释掉的脚本中定义。解决方案是使用jQuery.ready方法在页面加载时执行代码（包括脚本包含在页面底部）。将你的功能包含在内，你应该好好去：

$( document ).ready(function() {
    var map = new google.maps.LatLng(47.64864, -122.348927);
});

有关ready的更多信息，您可以查看始终有用的jQuery API： http://api.jquery.com/ready/

在扩展jQuery之前加载外部资源

2 个答案: