开发者问题收集

未捕获的类型错误：无法读取未定义的 common.js 的属性“x”

2016-02-10
20961
javascript google-maps-api-3

我正在使用 google map api v3，在使用

ma​​p.fitBounds(bounds); 函数时出现此错误

这是控制台上的错误快照 在此处输入图像描述

这是代码： 

var arr = [{lat: -25.363, lng: 131.044}, {lat: 12.97, lng: 77.59}];
for (i = 0; i < arr.length; i++) {
    bounds.extend(new google.maps.LatLng(arr[i]));
}
map.fitBounds(bounds); //If I comment this line in m code, the error is gone but map does not load.

有什么问题？我该如何解决？

2个回答

我猜想您的代码中某处有一个 self = this ，但前面没有 var 声明。

当您忘记 var 时，您正在创建一个全局变量 - 或者在这种情况下，将全局 self 重新定义为您的本地函数。这将导致 Google Maps 代码出现问题，该代码认为 self 是 Window ，并导致 Uncaught TypeError: Cannot read property 'x' of undefined(…)

这种错误就是为什么一些开发人员更喜欢使用 that 或其他术语而不是 self 进行范围控制。如果您是一位超级细心的程序员，并且永远不会忘记您的 var 声明，那么您就没有问题。但是对于我们当中那些偶尔会搞砸事情的人来说，使用 that 可以节省数小时令人沮丧的调试时间。*

* 那些超级细心的程序员会说，我们粗心大意，所以应该花费数小时进行令人沮丧的调试 :)

Sarah Maris
2016-08-18

google.maps.LatLngBounds.extend 方法尚未将 google.maps.LatLngLiteral 对象作为参数。

extend(point:LatLng) | Return Value: LatLngBounds

Extends this bounds to contain the given point.

将它们转换为 google.maps.LatLng 对象。 

var bounds = new google.maps.LatLngBounds();
var arr = [{lat: -25.363,lng: 131.044}, {lat: 12.97,lng: 77.59}];
for (i = 0; i < arr.length; i++) {
  bounds.extend(new google.maps.LatLng(arr[i].lat, arr[i].lng));
}
map.fitBounds(bounds);

概念验证小提琴

代码片段： 

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var arr = [{lat: -25.363,lng: 131.044}, {lat: 12.97,lng: 77.59}];
  for (i = 0; i < arr.length; i++) {
    var marker = new google.maps.Marker({
      position: arr[i],
      map: map
    });
    bounds.extend(new google.maps.LatLng(arr[i].lat, arr[i].lng));
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
geocodezip
2016-02-10