Question

我正在使用Google地图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);

Answer 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);

＆＃13;

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

＆＃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;

谷歌地图设置视图端口与东南西南坐标

1 个答案: