Question

我正在尝试从json文件动态加载地理编码http://debug-gotfed.admin.zope.net/bataviaeats/at/dev_remote_content

我收到了“类型错误：a未定义”。我错过了什么？

<script type="text/javascript">

  // Global

  var infowindow;
  var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
  var infoCloseIcon = 'images/close.png';
  var infoCloseMargin = '4px 4px 2px 2px';

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(58, 16),
      scrollwheel: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    $.each(locations, function(i, data) {
      console.log(data.geocode);
      var position = new google.maps.LatLng(data.geocode);
      var marker = new google.maps.Marker({
          position: position,
          map: map,
          icon: markers_img
        });
      console.log(marker);
      // marker.setMap(map);
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  </script>

Answer 1

您要么在加载页面时打开firebug控制台，要么在firefox扩展程序中阻塞下载，这使得浏览器无法从谷歌获取完整的脚本。

解决方案：关闭firebug控制台，如果情况并非如此，那么请尝试单独禁用扩展程序，看看有什么冲突。

Answer 2

只需添加v3作为发布版本，它将与firebug和任何其他扩展一起使用

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

所有学分都在这里： Google Maps API: TypeError: a is undefined

Answer 3

google.maps.LatLng构造函数有两个参数。这是错的：

  var position = new google.maps.LatLng(data.geocode);

如果data.geocode已经是google.maps.LatLng对象，请使用它。如果它是具有lat和lng属性的JSON对象，则必须将它们分别传递给构造函数：

  var position = new google.maps.LatLng(data.geocode.lat, data.geocode.lng);

您特定数据的代码：

      var geocode=data.geocode.split(',');
      var position = new google.maps.LatLng(geocode[0],geocode[1]);

Answer 4

感谢所有回答的人。这是最终的工作代码，增加了Infoboxes。我确实必须将拆分的地理编码数据转换为数字。您可以实时查看@ http://gotfed.in/fredericksburg-va

    <script type="text/javascript">

  // Global
  var map;
  var infowindow;
  var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
  var infoCloseIcon = 'http://gotfed.in/!/assets/global_images/close.png';
  var infoCloseMargin = '4px 4px 2px 2px';
  bounds = new google.maps.LatLngBounds();

  function initialize() {
    var mapOptions = {
      scrollwheel: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // create markers
    $.each(locations, function(i, data) {

      var geocode = data.geocode.split(',');
      var geo1 = parseFloat(geocode[0]);
      var geo2 = parseFloat(geocode[1]);
      var position = new google.maps.LatLng(geo1,geo2);
      var marker = new google.maps.Marker({
          position: position,
          map: map,
          icon: markers_img,
          title: data.business_name
        });
      bounds.extend(position);
      var id = "info" + i;
      console.log(id);
      var infobox = new InfoBox({
         content: document.getElementById(id),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, 0),
         zIndex: null,
         boxStyle: {width: "280px"},
        closeBoxMargin: infoCloseMargin,
        closeBoxURL: infoCloseIcon,
        infoBoxClearance: new google.maps.Size(1, 1)
      });
      google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(position);
      });
    });

    // set Bounds
    map.fitBounds(bounds);

    // Keep map centered
    var center;
    function calculateCenter() {
      center = map.getCenter()
    }
    google.maps.event.addDomListener(map, 'idle', function() {
      calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
      map.setCenter(center);
    });

  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

Google Maps API 3 - 输入错误：a未定义

4 个答案: