未捕获的TypeError：无法读取未定义的common.js的属性“x”

Question

我正在使用谷歌地图api v3并在使用

时出现此错误

map.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.

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

Answer 1

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

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

这种错误是一些开发人员更喜欢使用that或其他术语而不是self进行范围控制的原因。如果你是一个超级谨慎的编码员，永远不会忘记你的var声明你会没事的。但是对于那些偶尔陷入困境的人来说，使用that可以节省数小时令人沮丧的调试。*

* 那些超级谨慎的程序员会说我们应该花费数小时令人沮丧的调试因为我们不小心 :)

Answer 2

google.maps.LatLngBounds.extend方法不会将google.maps.LatLngLiteral个对象作为参数（尚未）。

  

extend（point：LatLng）|返回值：LatLngBounds

     

扩展此边界以包含给定点。

将它们翻译成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);

proof of concept fiddle

代码段

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>