Google 地图 LatLngBounds 有时不适用于 javascript 对象

Question

我的地图有问题。我正在使用 google 地图函数 LatLngBounds() 来计算两个给定点之间的中心。

我能够获取位置并 consoled.log 值（即使由于某种原因这些值是空的，我仍然能够将它们打印到地图上）所以我能够将我的标记放在地图上，但由于某种原因，当我为边界添加功能时，我打破了地图，我得到一个错误，我只能看到一个标记（一个标记。

这是我的代码：

var locs;

function initMap() {

  var locations_two = [
    ['<div class=""><p>Vancouver</p></div>', 49.27597, -123.1185, 1],
    ['<div class=""><p>Ottawa</p></div>', 45.3683, -75.70258]
  ];

  locs = new google.maps.Map(document.getElementById('locs'), {
    center: {lat: 49.276873, lng: -123.118948},
    zoom: 4
  });

  var image = $myimage;

  var infowindow = new google.maps.InfoWindow();

  var marker_two, i;

  var bounds = new google.maps.LatLngBounds();

  for (i = 0; i < locations_two.length; i++) {
    var mybond = locations_two[i];
    var myLatLng = new google.maps.LatLng(mybond[1], mybond[2]);
    marker_two = new google.maps.Marker({
        position: myLatLng,
        map: locs,
        icon: image
    });
    bounds.extend(myLatLng);
    google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations_two[i][0]);
            infowindow.open(map, marker);
        }
    })(marker_two, i));
    map.fitBounds(bounds);
  }

}

正如我所说，我在循环之前声明了变量 var bounds = new google.maps.LatLngBounds();，然后我使用另外两个 google 映射函数以便在最后调用 map.fitBounds(bounds);，将我的地图居中，但出现此错误：

Uncaught (in promise) TypeError: Cannot read property 'fitBounds' of undefined

哪个对我来说没有意义，因为 bounds 变量实际上已经定义了？有什么想法吗？

Answer 1

使用发布的代码我得到一个 javascript 错误（在 Chrome 中）：

Uncaught (in promise) ReferenceError: map is not defined

您的 google.maps.Map 对象被命名为 locs，而不是 map。这一行：

map.fitBounds(bounds);

应该是：

locs.fitBounds(bounds);

proof of concept fiddle

代码片段：

var locs;

function initMap() {
  var locations_two = [
    ['<div class=""><p>Vancouver</p></div>', 49.27597, -123.1185, 1],
    ['<div class=""><p>Ottawa</p></div>', 45.3683, -75.70258]
  ];
  locs = new google.maps.Map(document.getElementById('locs'), {
    center: {
      lat: 49.276873,
      lng: -123.118948
    },
    zoom: 4
  });
  var infowindow = new google.maps.InfoWindow();
  var marker_two, i;
  var bounds = new google.maps.LatLngBounds();

  for (i = 0; i < locations_two.length; i++) {
    var mybond = locations_two[i];
    var myLatLng = new google.maps.LatLng(mybond[1], mybond[2]);
    marker_two = new google.maps.Marker({
      position: myLatLng,
      map: locs,
    });
    bounds.extend(myLatLng);
    google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations_two[i][0]);
        infowindow.open(map, marker);
      }
    })(marker_two, i));
    locs.fitBounds(bounds);
  }
}

html,
body,
#locs {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="locs"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Google 地图 LatLngBounds 有时不适用于 javascript 对象

Google maps LatLngBounds doesn't work sometimes with a javascript object

javascript

google-maps-api-3

bounds