0

我正在尝试运行下面的代码，但遇到了多种方法错误，我不确定如何解决。此类错误的一个示例是 Object # has no method 'getBounds' 。我已从未包含在以下代码中的 API 密钥注册。

代码

<!doctype html>

<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Example</title>

    <style type="text/css">
        div {
            margin-top: 500px;
        }
    </style>

</head>


<div id="map"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>

    <script type="text/javascript"charset="utf-8">
    google.load("maps","2.x"); 
    google.load("jquery","1.5.2");
    </script>

    <script type="text/javascript">

    $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 
    });

    // setup 10 random points
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    var markers = []; 
    for (var i = 0; i<10; i++) { 
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 
      marker = new GMarker(point); 
      map.addOverlay(marker); 
      markers[i] = marker; 
    }

    $.each(markers, function(i, marker){
          // var marker = marker
          setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
          });

          $('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        var x = marker.getLatLng();
        $('#map-info').hide();
        var moveEnd = GEvent.addListener(map, 'moveend', function(){
          var markerOffset = map.fromLatLngToDivPixel(x);
          GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
          }

    </script>

</html>

更新代码

<!doctype html>

<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Example</title>

    <style type="text/css">
        div {
            margin-top: 500px;
        }
    </style>

</head>

<body>
<div id="map"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>

    <script type="text/javascript"charset="utf-8">
    google.load("maps","2.x"); 
    google.load("jquery","1.5.2");
    </script>

    <script type="text/javascript">

    $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 

      // setup 10 random points
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    var markers = []; 
    for (var i = 0; i<10; i++) { 
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 
      marker = new GMarker(point); 
      map.addOverlay(marker); 
      markers[i] = marker; 
    }

    $.each(markers, function(i, marker){
          // var marker = marker
          setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
          });

          $('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        var x = marker.getLatLng();
        $('#map-info').hide();
        var moveEnd = GEvent.addListener(map, 'moveend', function(){
          var markerOffset = map.fromLatLngToDivPixel(x);
          GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
          }
    });

    </script>
</body>
</html>
4

1 回答 1

2

$(document).ready()当 DOM 准备好时，您的函数就会运行。然而，其他代码在遇到时运行——在 DOM 准备好之前。

这意味着浏览器尝试做的事情map.getBounds() 之前 map已经设置好了。

解决方案是一起做所有的地图操作。

还要注意，必须为地图指定明确的大小。你需要这样的东西：

    div#map {
        height: 500px;
        width:500px;
    }

并且给每个div amargin-top将通过将该边距应用于每个地图图块而对地图产生不利影响。这需要去：

    div {  // applies to every div element
        margin-top: 500px;
    }
于 2012-08-15T21:31:30.763 回答