Question

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

我找到了西南和东北部的大多数点，从它们创建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：不是LatLng或LatLngLiteral：在属性lat中：不是数字

问题是，创建了southWest和northEast的LatLng实例时没有出现错误，因此尝试从两个有效的LatLng对象创建边界会产生错误，这似乎很奇怪。

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

Answer 1

看起来你正在将一个对象传递给构造函数而不是两个参数 - 你试过这个：

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

Answer 2

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

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

Answer 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

代码段

＆＃13;

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
  }
};

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

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

3 个答案: