Fatal编程技术网
  • javascript/
  • Javascript Google Maps fitBounds（）将地图缩小到非常远的范围，尽管边界很小

Javascript Google Maps fitBounds（）将地图缩小到非常远的范围，尽管边界很小

javascript google-maps-api-3

Javascript Google Maps fitBounds（）将地图缩小到非常远的范围，尽管边界很小,javascript,google-maps-api-3,google-fusion-tables,Javascript,Google Maps Api 3,Google Fusion Tables,我正在利用Google的Fusion Tables API在地图上显示县的轮廓，然后将其适配到任何视口。到目前为止，fitBounds已经为以前的贴图工作，但是当我添加Fusion Tables层时，一切都开始变得奇怪。下面的代码将地图缩小，以查看整个北美，尽管纬度范围在-87到-89之间，经度范围在42到43之间： function initMap() { const API_KEY = <my api key>; const MAP_KEY = <my map ke

我正在利用Google的Fusion Tables API在地图上显示县的轮廓，然后将其适配到任何视口。到目前为止，fitBounds已经为以前的贴图工作，但是当我添加Fusion Tables层时，一切都开始变得奇怪。下面的代码将地图缩小，以查看整个北美，尽管纬度范围在-87到-89之间，经度范围在42到43之间：

function initMap() {
  const API_KEY = <my api key>;
  const MAP_KEY = <my map key>;

  const map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(42.9065288383437, -88.35016674999997)
  });

  const style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: 44 }
      ]
    }
  ];

  const styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');

  const layer = new google.maps.FusionTablesLayer({
    query: {
      select: "col4",
      from: MAP_KEY
    },
    map: map,
    styleId: 8,
    templateId: 2
  });

  getTableCoordinates(
    MAP_KEY,
    API_KEY,
    function (rows) {
      if (rows.length !== 0) {
        const bounds = new google.maps.LatLngBounds(null);

        /*
            Real examples of pair:
            [ -87.8199, 42.621 ],
            [ -87.4934, 42.123 ],
            [ -87.815094, 42.558089 ],
            etc.

            There's about ~1000 of these, all extremely close in lat and lng.
        */
        rows.forEach(function (pair) {
          const boundary = new google.maps.LatLng(pair[0], pair[1]);

          bounds.extend(boundary);
        });

        setMapBounds(map, bounds, map.getCenter());

        google.maps.event.addDomListener(window, "resize", function() {
          google.maps.event.trigger(map, "resize");
          setMapBounds(map, bounds, map.getCenter());
        });
      }
    }
  )
}

function getTableCoordinates(mapKey, apiKey, callback) {
  const apiLink = "https://www.googleapis.com/fusiontables/v2/query?";
  const query = [
      "SELECT",
      "col4",
      "FROM",
      mapKey
    ]
    .join("+");

  $.ajax({
    url: apiLink + "sql=" + query + "&key=" + apiKey,
    dataType: "json"
  })
  .done(function (response) {
    callback(
      response
        .rows
        .map(function(row) {
          return row[0].geometry.coordinates[0];
        })
        .reduce(function(a, b) {
          return a.concat(b);
        })
    );
  })
  .fail(function () {
    callback([]);
  });
}

function setMapBounds(map, bounds, center) {
  map.fitBounds(bounds);

  if (center) {
    google.maps.event.addListenerOnce(map, "bounds_changed",
      (function (event) {
        // Reset center since fitBounds can change it
        map.setCenter(center);
      })
    );
  }
}
我知道地图调用看起来很奇怪，但它返回了我需要的所有有效坐标。数据很好，我已经查看了边界的一角，但到目前为止它仍将其缩小。

有几个问题：

看起来像是对[0]，对[1]应该是对[1]，对[0]，就像你的坐标是经度，纬度，而google.maps.LatLng需要经度，纬度。 纬度-87低于南极附近的可用磁砖。如果我把它们翻过来，我会找到密尔沃基附近的位置。与您的地图中心中心比较：new google.maps.LatLng42.9065288383437，-88.35016674999997

此map.setCentercenter；如果中心不是边界的中心，则会在setMapBounds方法中造成奇怪

代码段：

函数初始化映射{ const map=new google.maps.Mapdocument.getElementById'map'{ 中心：new google.maps.LatLng42.9065288383437，-88.35016674999997 }; const bounds=new google.maps.latlngboundsnll； //样本数据 变量行=[ [-87.8199, 42.621], [-87.4934, 42.123], [-87.815094, 42.558089], ] //注意.forEach是异步的 //rows.forEachfunctionpair{ 对于变量i=0；i