Question

重新计算信息框位置的最佳方法是什么，它总是试图在地图内完全绘制但不移动地图。

因此，如果我尝试打开一个靠近窗口右边缘的信息框，它应该将信息框放在标记的左边，而不是在它的顶部或左边。

是否有框架？

谢谢！

我的每个请求的信息框选项。

        var myOptions = {
             content: this.bigInfo(variables)
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(20, -60)
            ,zIndex: 9
            ,boxClass: "bigInfo"
            ,closeBoxMargin: "-9px -9px 3px 3px"
            ,closeBoxURL: "./img/close.png"
            ,infoBoxClearance: new google.maps.Size(100,100)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

Answer 1

我有一个InfoBoxes的黑客攻击。它依赖于从LatLng到我在另一个问题fromLatLngToContainerPixel中找到的屏幕像素的转换。 Google文档说明告诉像素位置是在＆＃34; map的外部容器＆＃34;中测量的。然而，回答者警告它的兄弟功能，fromLatLngToDivPixel。是不可靠的，因为它通过调整大小或缩放来冻结。

因此，我的代码使用fromLatLngToContainerPixel。如果您尝试使用我的代码，请在代码中进行操作，看看是否需要更改偏移量。在我的代码中，我有一个固定的InfoBox宽度为86px。

单击中心，然后单击可见区域的边缘。地图不会移动。

这里是JSFiddle：http://jsfiddle.net/eHT9U/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body { margin: 0; padding: 0; height: 100% }
      #map_canvas { width: 100%; height: 300px }
      #container { padding: 10px; }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="infobox_alt.js"></script>
    <script type="text/javascript" src="jquery.js"></script>    
    <script type="text/javascript">
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(40.0, -88.0),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var count = 0;

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        overlay = new google.maps.OverlayView();
        overlay.draw = function() {};
        overlay.setMap(map);

        google.maps.event.addListener(map, 'click', function (event) {
          count += 1;
          pt = overlay.getProjection().fromLatLngToContainerPixel(event.latLng);
          document.getElementById("end").value = pt;
          addMarker(event.latLng, "index #" + Math.pow(100, count), pt.x, pt.y);
        });
      }

      function addMarker(pos, content, x, y) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        marker.setTitle(content);

        var labelText = content;

        var myOptions = {
          content: labelText
           ,boxStyle: {
              border: "1px solid black"
             ,background: "white"
             ,textAlign: "center"
             ,fontSize: "8pt"
             ,width: "86px"  // has to be set manually
             ,opacity: 1.0
             ,zIndex: -100
            }
           ,disableAutoPan: true
           ,position: marker.getPosition()
           ,closeBoxURL: ""
           ,pane: "floatPane"
           ,enableEventPropagation: true
           ,zIndex:-1
        };
        offX = -43;
        offY = 0;
        //compare boundaries
        if(x > $("#map_canvas").width() - 60) {
          offX = -86;
        } 
        if(x < 60) {
      offX = 0;
        } 
        if(y > $("#map_canvas").height() - 60) {
          offY = -50;
        } 
    myOptions.pixelOffset = new google.maps.Size(offX,offY);

        var ibLabel = new InfoBox(myOptions);
        ibLabel.setZIndex(-1);
        ibLabel.open(map);

        var infowindow = new google.maps.InfoWindow({ 
          content: content
        });

        google.maps.event.addListener(marker, 'click', function (event) {
          infowindow.open(map, this);
          ibLabel.setZIndex(-1);
          this.setZIndex(1);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    end: <input id="end" size="30">
    <div id="container">
      <div id="map_canvas"></div>
    </div>
  </body>
</html>

Answer 2

我发现此示例符合您的要求

http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

Answer 3

有一个代码示例SmartInfoWindow，使用InfoWindow执行您所描述的内容。作为一个例子，你应该能够以正确的方向开始。

Answer 4

我也遇到了这个问题，我的解决方案是使用panBy。

map.panBy(0, -100);    // panning to show full infobox    (xoffset,yoffset)

信息框上的边界检测，因此它们不会从地图上抽出抽屉

4 个答案: