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

Question

我正在使用 google 地图 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 对象创建边界会引发错误似乎很奇怪。

我错过了什么导致了这个错误？

Answer 1

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

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

Answer 2

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

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

Answer 3

将google.maps.LatLng constructor doesn't (currently) take a google.maps.LatLngLiteral作为参数。它需要两个 Numbers 表示地理坐标的纬度和经度（按此顺序）。这个：

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

代码片段：

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>

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

Error when trying to create a LatLngBounds object from valid LatLng objects

javascript

google-maps

latitude-longitude