扩展 Google Maps Bounds 以便 div 覆盖不覆盖任何标记答案

【问题标题】：Extend Google Maps Bounds so that div overlay doesn't cover any markers扩展 Google Maps Bounds 以便 div 覆盖不覆盖任何标记
【发布时间】：2011-01-26 07:36:32
【问题描述】：

在我正在处理的 Google 地图混搭中，地图的宽度为 100%，高度几乎为 100%，我有一个水平透明的 div，它使用 z-index 和 CSS 覆盖在地图的左侧。

当我动态添加我的标记时，我从一个空的 Bounds 对象开始，并一一扩展它以包含新的 LatLngs。但是，有时标记会出现在包含其他元素的透明 div 下方。

假设我的透明 div 是 250 像素宽。

我想做的是，一旦建立了显示所有标记的边界，我想再扩展一次以扩展 Google 地图的视口，这样当我适应边界时，这些标记现在出现在距离左边框至少 250 像素处，这样它们就不会被透明 div 覆盖。

我尝试使用MapProjection.fromPointToLatLng 和MapCanvasProjection.fromDivPointToLatLng，但无法获得可预测的结果。

任何建议或示例将不胜感激。

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

希望这个快速而肮脏的解决方案会有所帮助（它是 API v3）

<html>
  <head>
    <style>
      #over {
        position: absolute;
        z-index: 99999;
        width: 250px;
        height: 600px;
        opacity: 0.7;
        top: 0px;
        border: 2px solid black;
        left: 0px;
        background: white;
      }
    </style>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps Bounds</title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script
      type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"
    ></script>
    <script type="text/javascript">
      var map;
      var bounds;
      var overlay;
      //the witdh of your overlay (probably should get it dynamically
      var overlayWidth = 250;

      function initialize() {
        var chicago = new google.maps.LatLng(41.875696, -87.624207);
        var myOptions = {
          zoom: 11,
          center: chicago,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(
          document.getElementById("map_canvas"),
          myOptions
        );
        overlay = new google.maps.OverlayView();

        overlay.draw = function() {};

        overlay.setMap(map);
      }

      function addMarker() {
        maywood = new google.maps.LatLng(41.8823, -87.8487);
        var marker = new google.maps.Marker({
          position: maywood,
          map: map
        });
        bounds = map.getBounds();

        point = overlay.getProjection().fromLatLngToContainerPixel(maywood);
        //point is under overlay
        if (point.x < overlayWidth) {
          //calculate offset by which to extend
          offset = new google.maps.Point(point.x - overlayWidth, 0);
          extendByX = overlay
            .getProjection()
            .fromContainerPixelToLatLng(offset);
          //here you might want to check if all your existing markers will fit into new bounds before applying the new bounds
          newBounds = new google.maps.LatLngBounds(
            extendByX,
            bounds.getNorthEast()
          );
          map.fitBounds(newBounds);
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="over">OVERLAY</div>
    <div id="map_canvas" style="width: 900px;height: 600px;"></div>
    <input
      type="button"
      value="Add Marker & Expand Bounds"
      onclick="addMarker()"
    />
  </body>
</html>

【讨论】：

感谢您的回复，我会尽快评估它是否有效