0

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

例子在这里：小提琴（重现这种情况进入全屏模式，点击第一条折线，缩小并点击第二条）

有什么建议为什么会发生？

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

1 回答 1

0

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

bounds在折线单击侦听器函数中声明变量：

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

概念证明小提琴

代码片段：

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

于 2017-09-08T13:37:34.437 回答