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

InfoBox のハックがあります。別の質問で見つけた LatLng からスクリーン ピクセルへの変換に依存していますfromLatLngToContainerPixel。Google ドキュメントの説明によると、ピクセル位置は「マップの外側のコンテナ」で測定されます。ただし、回答者は、その兄弟関数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>
于 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

を使用して記述したことを行うコード例SmartInfoWindowInfoWindowがあります。それを例として使用すると、正しい方向に始めることができるはずです。

于 2012-05-11T17:40:06.160 に答える