Question

我有一张覆盖整个屏幕的地图画布。

#map-canvas
{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 0;
}

在此画布的顶部有一个半透明的左侧边栏，右侧的区域使用rails model在地图上显示标记。现在，当我将视图连接到子结果数据时，一些标记位于侧边栏下方，但我希望所有标记都调整到右侧区域。

发生了什么： #What is happening:

我想要的： #What I want:

Answer 1

我认为你知道map.fitBounds（bounds）;

如果您将标记作为边界进行输送，您将获得上面的图片。现在，假设我们在地图上留下了一个额外的点（一个不可见的标记）。

我们将计算该点应该在哪里。我们不会将它添加到标记中，但我们将其添加到边界。

所以我刚写了一个函数。您可以选择侧边栏的宽度。我将其设置为0.5（50％侧边栏），请参阅第29行。根据您需要的值进行调整。

<style>
#map {
  height: 400px;
}
</style>
<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
  locations = [
    [50.86721032255901,4.317024205042674],
    [50.89585769377925,4.481363151385143],
    [50.834376046898974,4.298433814360454],
    [50.82280917273896,4.395368848158672]
  ];

  function initialize() {
    map = new google.maps.Map(document.getElementById("map"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(locations[0][0], locations[0][1]),
      zoom: 10
    });
    for (var i=0; i<locations.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      })
    }
    setBoundsLeftSidebar(locations, 0.5);
  }
  /**
  * @param mapFraction (float): 0.0 to 1.0 ; example: 0.6 means 40% of the map is covered by the sidebar, 60% by the map
  */
  function setBoundsLeftSidebar(points, mapFraction) {
    // first we want to know min and max longitude
    var max = -180;
    var min = 180;
    // We make bounds.  The bounds are the markers + an extra point on the left (we will give it a latitude of point 0), see later
    var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<points.length; i++) {
      if(points[i][1] > max) {
        max = points[i][1];
      }
      if(points[i][1] < min) {
        min = points[i][1];
      }
      bounds.extend(new google.maps.LatLng(points[i][0], points[i][1]));
    }
    // So now we have min and max.  
    // we add a point to the left of min
    var widthTotal = (max - min) / mapFraction;
    var pointExtremeLeft = max - widthTotal;
    bounds.extend(new google.maps.LatLng(points[0][0], pointExtremeLeft));
    map.fitBounds(bounds);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google仅在特定区域中映射标记

1 个答案: