javascript - 更改适合边界框的区域

Question

假设我有一个全屏谷歌地图，左侧有一个 div（但严格来说，不是地图的覆盖或 UI 元素）并且绝对定位。

现在假设我有一个边界框（如：[ [lat, lng], [lat, lng] ]，我想让地图适合。如果我想让它考虑到那个 div 怎么办。我有绝对位置和它的大小（以像素为单位）。我可以在地图上指定“此区域超出范围，不要让边界框与之冲突”吗？

Answer 1

Are you trying to place a bounding box around the map or are you trying to ensure that all markers are displayed within the map? The api allows you to set up a bounding area so that when the map loads all points are visible within the map. The map will zoom or scale accordingly.

to setup bounds within your function add the following

    (function(){
    ..existing code 

    var bounds = new google.maps.LatLngBounds();
    var infowindow;   
    //Here I have an event listener that I have setup for the clicking of the markers 

    (function (i, marker) {
         google.maps.event.addListener(marker, 'click', function () {

            if (!infowindow) {
               infowindow = new google.maps.InfoWindow();
            }

            infowindow.setContent('Location: ' + i);

            infowindow.open(map, marker);
            });
         })(i, marker);
          bounds.extend(places[i]);
       }
      map.fitBounds(bounds)

   })();

There are a few things happening here. Map is the name of my DIV layer the anonymous function would just be used to wrap everything. The reason I added the click event code was to also show how I can get the map to auto position whenever I click on a marker to view the info window (using the bounds.extend(places[i]). Places is the array of coordinates that I have collected. I didn't add all the code such as for the marker generation but I would normally place this block of code following that. The bounds function as part of the api forces the map to auto position and zoom according to where the markers are located on the page. This ensures that when the map is rendered all markers are visible to the user. Not sure if this is what you wanted but if you can clarify I may be able to elaborate more.

Best of luck