Question

我在div中有一个地图，其中绝对位置在容器内部也是绝对的。此外，地图的大小是根据顶部，底部，左侧和右侧css属性计算的。单击折线会在地图上调用fitBounds，而不是将其缩小到0。

示例在这里：fiddle（要重现这种情况，请进入全屏模式，点击第一条折线，outzoom并点击第二条）

为什么会发生这种情况？

<body onload="initialize()">
  <div id="map_container" style="position: absolute; width: 100%; height: 100%;">
      <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
      </div>
  </div>
</body>

和js代码

var mapOptions = {
    zoom: 7,
    center: {lat: 52, lng: 12.5}
}

var firstPolylineCoordinates = [
    {lat: 52, lng: 12},
    {lat: 52, lng: 13}
];

var secondPolylineCoordinates = [
    {lat: 51, lng: 12},
    {lat: 51, lng: 13}
];

function initialize(){

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds = new google.maps.LatLngBounds();

    var firstPolyline = new google.maps.Polyline({
      path: firstPolylineCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    firstPolyline.setMap(map);
    firstPolyline.addListener("click", function(polyMouseEvent){
      bounds.extend(firstPolylineCoordinates[0]);
      bounds.extend(firstPolylineCoordinates[1]);
        map.fitBounds(bounds);
    });

    var secondPolyline = new google.maps.Polyline({
      path: secondPolylineCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    secondPolyline.setMap(map);
    secondPolyline.addListener("click", function(polyMouseEvent){
      bounds.extend(secondPolylineCoordinates[0]);
      bounds.extend(secondPolylineCoordinates[1]);
        map.fitBounds(bounds);
    });
}

Answer 1

您对两条折线使用相同的边界＆＃34; zoom＆＃34;操作。当您单击第二条折线时，最终会缩放到两条折线的边界（这不是您想要的）。

在折线点击监听器功能中声明bounds变量：

firstPolyline.addListener("click", function(polyMouseEvent){
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(firstPolylineCoordinates[0]);
  bounds.extend(firstPolylineCoordinates[1]);
    map.fitBounds(bounds);
});

proof of concept fiddle

代码段

＆＃13;

var mapOptions = {
    zoom: 7,
    center: {lat: 52, lng: 12.5}
}

var firstPolylineCoordinates = [
    {lat: 52, lng: 12},
    {lat: 52, lng: 13}
];

var secondPolylineCoordinates = [
    {lat: 51, lng: 12},
    {lat: 51, lng: 13}
];

function initialize() {

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var firstPolyline = new google.maps.Polyline({
    path: firstPolylineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  firstPolyline.setMap(map);
  firstPolyline.addListener("click", function(polyMouseEvent) {
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(firstPolylineCoordinates[0]);
    bounds.extend(firstPolylineCoordinates[1]);
    map.fitBounds(bounds);
  });

  var secondPolyline = new google.maps.Polyline({
    path: secondPolylineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  secondPolyline.setMap(map);
  secondPolyline.addListener("click", function(polyMouseEvent) {
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(secondPolylineCoordinates[0]);
    bounds.extend(secondPolylineCoordinates[1]);
    map.fitBounds(bounds);
  });
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
  <div id="map_container" style="position: absolute; width: 100%; height: 100%;">
    <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
    </div>
  </div>
</body>

＆＃13;

全屏上的FitBounds缩小到0

1 个答案: