0

以下のコードを実行しようとしていますが、対処方法がわからない複数のメソッドエラーが発生しています。このようなエラーの例は、オブジェクト＃にメソッド'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 に答える