Google Maps API - Рассчитать масштаб на основе миль

Question

Как рассчитать масштаб карты, основываясь на вводимых миль?

Примером может быть то, что пользователь выбирает из выпадающего списка, что он хочет искать в радиусе 50 миль.Уровень масштабирования карты должен обновиться, чтобы показать область в 50 миль вокруг исходных координат, указанных на карте.

Моя попытка настолько же неточна и удивительна, насколько это возможно ...

calculateZoomLevel(miles) {
    let zoom = 11;

    switch(miles) {
        case 5 : {
            zoom = 14;
            break;
        }
        case 15 : {
            zoom = 13;
            break;
        }
        case 25 : {
            zoom = 11;
            break;
        }
        case 50 : {
            zoom = 10;
            break;
        }
        case 100 : {
            zoom = 8;
            break;
        }
        case 3963.2 : {
            zoom = 1
        }
    }

    return zoom;
}

Answer 1

Самый простой вариант - создать объект google.maps.Circle с желаемым радиусом, а затем подогнать карту к ее границам (на самом деле вам не нужно показывать круг на карте, если вы этого не хотите).

var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
circle = new google.maps.Circle({
  center: map.getCenter(),
  radius: radius,
  fillOpacity: 0.35,
  fillColor: "#FF0000",
  map: map
});

пример "поиска радиуса" в реальном времени

подтверждение концепции (используется геокодер для установки центра карты по введенному адресу

map.fitBounds (circle.getBounds ());

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

// global "map" variable
var map = null;
var circle = null;
var geocoder = new google.maps.Geocoder();

function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787, -79.359741),
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

function codeAddress() {
  var address = document.getElementById('address').value;
  var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      side_bar_html = "";
      map.setCenter(results[0].geometry.location);
      var searchCenter = results[0].geometry.location;
      if (circle) circle.setMap(null);
      circle = new google.maps.Circle({
        center: searchCenter,
        radius: radius,
        fillOpacity: 0.35,
        fillColor: "#FF0000",
        map: map
      });
      map.fitBounds(circle.getBounds());

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

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

#map_canvas {
  height: 90%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>
<div>
  <input id="address" type="textbox" value="Toronto">
  <input type="button" value="Geocode" onclick="codeAddress()"><br>
  <input id="radius" type="textbox" value="50"> miles
</div>