尝试从有效的 LatLng 对象创建 LatLngBounds 对象时出错答案

【问题标题】：Error when trying to create a LatLngBounds object from valid LatLng objects尝试从有效的 LatLng 对象创建 LatLngBounds 对象时出错
【发布时间】：2023-03-19 00:43:01
【问题描述】：

我正在使用 google maps javascript API，目前我正在尝试创建一个 LatLngBounds 对象，以便我可以根据数组中的位置将它应用到我的 google 地图。

我正在寻找西南和东北大多数点，从中创建 LatLng 对象，然后尝试使用这些点创建 LatLangBounds 对象：

centerMap: function (){
    var lowestLatitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry < nextLocation.position.lat && carry !== null ? carry : nextLocation.position.lat;
    }, null);

    var lowestLongitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry < nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lng;
    }, null);

    var highestLatitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry > nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lat;
    }, null);

    var highestLongitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry > nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lng;
    }, null);

    debugger;
    var southWest = new google.maps.LatLng({ lat: lowestLatitude, lng: lowestLongitude});
    var northEast = new google.maps.LatLng({ lat: highestLatitude, lng: highestLongitude});
    var bounds = new google.maps.LatLngBounds({sw: southWest, ne: northEast});
    this.map.fitBounds(bounds);
}

我遇到的错误是在创建 LatLngBounds 实例时。我得到错误：

Uncaught InvalidValueError: not a LatLng or LatLngLiteral: in property lat: not a number

问题是，southWest 和 northEast 的 LatLng 实例是在没有错误的情况下创建的，因此尝试从两个有效的 LatLng 对象创建边界会引发错误似乎很奇怪。

我错过了什么导致此错误？

【问题讨论】：

标签： javascript google-maps latitude-longitude

【解决方案1】：

看起来您正在将一个对象而不是 2 个参数传递给构造函数 - 您尝试过吗：

var bounds = new google.maps.LatLngBounds(southWest, northEast);

【讨论】：

哇，你对我来说太快了！ +1！
嗯，那是一个非常棒的时刻！感谢您指出这一点。

【解决方案2】：

查看documentation 构造函数有两个参数，而不是一个有两个属性的对象。因此，您需要以下内容：

var bounds = new google.maps.LatLngBounds(southWest,  northEast);

【讨论】：

【解决方案3】：

google.maps.LatLng 构造函数（当前）不采用google.maps.LatLngLiteral 作为参数。它需要两个数字，分别代表地理坐标的纬度和经度（按此顺序）。这个：

var southWest = new google.maps.LatLng({ lat: lowestLatitude, lng: lowestLongitude});
var northEast = new google.maps.LatLng({ lat: highestLatitude, lng: highestLongitude});
var bounds = new google.maps.LatLngBounds({sw: southWest, ne: northEast});

应该是：

var southWest = new google.maps.LatLng(lowestLatitude, lowestLongitude);
var northEast = new google.maps.LatLng(highestLatitude, highestLongitude);
var bounds = new google.maps.LatLngBounds(southWest, northEast);

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

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 lowestLatitude = bndsObj.bounds.south;
  var lowestLongitude = bndsObj.bounds.west;
  var highestLatitude = bndsObj.bounds.north;
  var highestLongitude = bndsObj.bounds.east;
  var southWest = new google.maps.LatLng(lowestLatitude, lowestLongitude);
  var northEast = new google.maps.LatLng(highestLatitude, highestLongitude);
  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);
// New York City bounds
var bndsObj = {
  "bounds": {
    "south": 40.4960439,
    "west": -74.2557349,
    "north": 40.91525559999999,
    "east": -73.7002721
  }
};

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>

【讨论】：