Карты Google fitBounds () увеличивают масштаб карты, несмотря на небольшие границы - PullRequest
Новая
       39

Карты Google fitBounds () увеличивают масштаб карты, несмотря на небольшие границы

0 голосов
/ 31 августа 2018

Я использую Google Fusion Tables API для отображения контуров округов на карте, а затем подгоняю его к любому окну просмотра. fitBounds () до сих пор работал для предыдущих карт, но когда я добавляю в Fusion Tables Layer, все начинает становиться странным. Следующий код в конечном итоге приводит к уменьшению карты для просмотра всей Северной Америки, несмотря на то, что диапазон широт составляет от -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);
      })
    );
  }
}

Я знаю, что вызов map () выглядит странно, но он возвращает все нужные мне действительные координаты. Данные в порядке, я посмотрел на угол, но он все еще уменьшает масштаб.

1 Ответ

0 голосов
/ 31 августа 2018

Пара вопросов:

  1. Похоже, pair[0], pair[1] должно быть pair[1], pair[0] (например, ваши координаты - это долгота, широта, где google.maps.LatLng ожидает широту, долготу).
    Широта -87 ниже доступных плиток около южного полюса. Если я переверну их, я получу места возле Милуоки. (сравните с центром вашей карты: новый google.maps.LatLng (42.9065288383437, -88.35016674999997))

  2. this map.setCenter(center); вызывает странность в методе setMapBounds, если center не является центром границ.

подтверждение концепции скрипки

screenshot of map displaying your sample data

фрагмент кода: 

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(42.9065288383437, -88.35016674999997)
  });
  const bounds = new google.maps.LatLngBounds(null);
  // sample data
  var rows = [
    [-87.8199, 42.621],
    [-87.4934, 42.123],
    [-87.815094, 42.558089],
  ]
  // note that .forEach is asynchronous
  //rows.forEach(function(pair) {
  for (var i = 0; i < rows.length; i++) {
    var pair = rows[i];
    const boundary = new google.maps.LatLng(pair[1], pair[0]);
    var marker = new google.maps.Marker({
      position: boundary,
      map: map
    })
    bounds.extend(boundary);
  } //);
  var rect1 = new google.maps.Rectangle({
    bounds: bounds,
    fillOpacity: 0.5,
    fillColor: "blue",
    map: map
  })
  setMapBounds(map, bounds, /* map.getCenter() */ );

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

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

function setMapBounds(map, bounds, center) {
  console.log("bounds=" + bounds.toUrlValue(6));
  map.fitBounds(bounds);

  if (center) {
    google.maps.event.addListenerOnce(map, "bounds_changed",
      (function(event) {
        // Reset center since fitBounds can change it
        map.setCenter(center);
      })
    );
  }
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
...