谷歌地图设置视口与东南西北坐标答案

【问题标题】：Google maps set view port with north south east west coordinates谷歌地图设置视口与东南西北坐标
【发布时间】：2018-01-26 06:38:25
【问题描述】：

我正在使用 Google maps V3，我想使用 northEastLat、northEastLng、southWestLat 和 southWestLng 坐标设置地图视图端口可见区域。我已经有了坐标，只需要知道如何编写脚本来重新定位地图。谢谢。

var northEastLat = data.northEastLat;
var northEastLng = data.northEastLng; 
var southWestLat = data.southWestLat; 
var southWestLng = data.southWestLng; 

var mapOptions = {
                        center: new google.maps.LatLng(northEastLat, northEastLng, southWestLat, southWestLng), // i know this is wrong, not sure how to do it...
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    // create the map and reference the div#map-canvas container
                    var mapDiv = document.getElementById("map_canvas");
                    mapCanvas = new google.maps.Map(mapDiv, mapOptions);
                    mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

【问题讨论】：

标签： php mysql google-maps google-maps-api-3

【解决方案1】：

要将地图视口设置为已知范围，请使用google.maps.Map.fitBounds 方法。

var mapOptions = {
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var bounds = new google.maps.LatLngBounds(
/* sw */ {lat: southWestLat, lng: southWestLng},
/* ne */ {lat: northEastLat, lng: northEastLng});

// create the map and reference the div#map-canvas container
var mapDiv = document.getElementById("map_canvas");
mapCanvas = new google.maps.Map(mapDiv, mapOptions);
mapCanvas.fitBounds(bounds);

var mapCanvas;

function initialize() {

  var northEastLat = 37.468404;
  var northEastLng = -122.095122;
  var southWestLat = 37.415386;
  var southWestLng = -122.188678;

  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var bounds = new google.maps.LatLngBounds(
    /* sw */
    {
      lat: southWestLat,
      lng: southWestLng
    },
    /* ne */
    {
      lat: northEastLat,
      lng: northEastLng
    });

  // create the map and reference the div#map-canvas container
  var mapDiv = document.getElementById("map_canvas");
  mapCanvas = new google.maps.Map(mapDiv, mapOptions);
  mapCanvas.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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>

【讨论】：