谷歌地图javascript多个方法错误

Google maps javascript multiple methods error

本文关键字：方法 错误 javascript 谷歌地图      更新时间：2023-09-26

我正在尝试运行下面的代码，但遇到多个方法错误，我不确定如何解决。此类错误的一个例子是对象#没有方法"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>

您的$(document).ready()函数在 DOM 准备就绪时运行。但是，其他代码在遇到时运行 — 在 DOM 准备就绪之前。

这意味着浏览器会在设置map之前尝试执行map.getBounds()。

解决方案是一起执行所有映射操作。

另请注意，必须为地图指定显式大小。你需要这样的东西：

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

给每个div一个margin-top，会将该边距应用于每个地图图块，从而对地图产生不利影响。这需要去：

    div {  // applies to every div element
        margin-top: 500px;
    }
相关文章：