4

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

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

有没有框架？

谢谢 ！

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

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

4 回答 4

3

我对 InfoBoxes 有一个 hack。它依赖于从 LatLng 到我在另一个问题中找到的屏幕像素的转换，fromLatLngToContainerPixel. 谷歌文档描述告诉像素位置是在“地图的外部容器”中测量的。但是，回答者警告说，它的兄弟函数fromLatLngToDivPixel. 不可靠，因为它会因调整大小或缩放而冻结。

所以，我的代码使用fromLatLngToContainerPixel. 如果您尝试使用我的代码，请在您的代码中玩耍，看看是否需要更改偏移量。在我的代码中，我有一个固定的信息框宽度为 86 像素。

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

这是 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>
于 2012-05-12T01:09:00.407 回答
1

我发现这个例子适合你的要求

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

于 2012-05-11T17:39:55.807 回答
1

有一个代码示例SmartInfoWindow，它使用InfoWindow. 以此为例，您应该能够朝着正确的方向开始。

于 2012-05-11T17:40:06.160 回答
0

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

map.panBy(0, -100);    // panning to show full infobox    (xoffset,yoffset)
于 2017-02-12T20:08:59.427 回答