14

デフォルトの上部の位置ではなく、マーカーの側面にボックスが開いているカスタムinfoBubbleを実装しようとしています。これは予想よりも難しいことが判明しました。

通常のinfoWindowを使用すると、pixelOffsetを使用できます。ドキュメントについては、こちらをご覧ください

infoBubbleを使用すると、これは当てはまらないようです。infoBubbleでpixelOffsetを使用する方法はありますか、それとも同じことをする何かがありますか？

このようなグーグル検索を使用すると、関連する結果が返されないため、これを検索するのは非常に難しいことがわかりました。グーグル検索

以下は私が使用しているすべてのリソースです。

  • infoBubbleの例はこちら。

  • ここでマップとinfoBubbleを設定するための私のJavaScript 。

そして今、私のjavascriptは、jsfiddleリンクが壊れている場合に備えてここにあります。

<script type="text/javascript">

    $(document).ready(function () {
        init();
    });

    function init() {

        //Setup the map
        var googleMapOptions = {
            center: new google.maps.LatLng(53.5167, -1.1333),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //Start the map
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        googleMapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(53.5267, -1.1333),
            title: "Just a test"
        });

        marker.setMap(map);

        infoBubble = new InfoBubble({
            map: map,
            content: '<div class="phoneytext">Some label</div>',
            //position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: '10px',
            //backgroundColor: 'rgb(57,57,57)',
            borderRadius: 5,
            minWidth: 200,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: false,
            arrowPosition: 7,
            backgroundClassName: 'phoney',
            pixelOffset: new google.maps.Size(130, 120),
            arrowStyle: 2
        });
        infoBubble.open(map, marker);

    }
</script>

アップデート

この質問に答えるのを助けるために、私はここにテストケースをまとめました。重要な行は38行目と39行目で、ラベルを配置する場所を指定する必要があります。

アップデート2

バウンティが授与されるためには、マーカーの上のデフォルトの位置から離れて配置されたinfoBubbleの例を見る必要があります。できればマーカーの右側に。

アップデート3

テストケースは古い会社のサーバーでホストされているため、アップデート1から削除しました。

4

6 に答える 6

10

これが私の解決策です。

InfoBubble図書館で

交換

InfoBubble.prototype.draw メソッド全体

と

/*
 * Sets InfoBubble Position
 * */
InfoBubble.prototype.setBubbleOffset = function(xOffset, yOffset) {
  this.bubbleOffsetX = parseInt(xOffset);
  this.bubbleOffsetY = parseInt(yOffset);
}


/*
 * Gets InfoBubble Position
 * */
InfoBubble.prototype.getBubbleOffset = function() {
  return {
    x: this.bubbleOffsetX || 0,
    y: this.bubbleOffsetY || 0
  }
}

/**
 * Draw the InfoBubble
 * Implementing the OverlayView interface
 */
InfoBubble.prototype.draw = function() {
  var projection = this.getProjection();

  if (!projection) {
    // The map projection is not ready yet so do nothing
    return;
  }

  var latLng = /** @type {google.maps.LatLng} */ (this.get('position'));

  if (!latLng) {
    this.close();
    return;
  }

  var tabHeight = 0;

  if (this.activeTab_) {
    tabHeight = this.activeTab_.offsetHeight;
  }

  var anchorHeight = this.getAnchorHeight_();
  var arrowSize = this.getArrowSize_();
  var arrowPosition = this.getArrowPosition_();

  arrowPosition = arrowPosition / 100;

  var pos = projection.fromLatLngToDivPixel(latLng);
  var width = this.contentContainer_.offsetWidth;
  var height = this.bubble_.offsetHeight;

  if (!width) {
    return;
  }

  // Adjust for the height of the info bubble
  var top = pos.y - (height + arrowSize) + this.getBubbleOffset().y;

  if (anchorHeight) {
    // If there is an anchor then include the height
    top -= anchorHeight;
  }

  var left = pos.x - (width * arrowPosition) + this.getBubbleOffset().x;

  this.bubble_.style['top'] = this.px(top);
  this.bubble_.style['left'] = this.px(left);

  var shadowStyle = parseInt(this.get('shadowStyle'), 10);

  switch (shadowStyle) {
    case 1:
      // Shadow is behind
      this.bubbleShadow_.style['top'] = this.px(top + tabHeight - 1);
      this.bubbleShadow_.style['left'] = this.px(left);
      this.bubbleShadow_.style['width'] = this.px(width);
      this.bubbleShadow_.style['height'] =
        this.px(this.contentContainer_.offsetHeight - arrowSize);
      break;
    case 2:
      // Shadow is below
      width = width * 0.8;
      if (anchorHeight) {
        this.bubbleShadow_.style['top'] = this.px(pos.y);
      } else {
        this.bubbleShadow_.style['top'] = this.px(pos.y + arrowSize);
      }
      this.bubbleShadow_.style['left'] = this.px(pos.x - width * arrowPosition);

      this.bubbleShadow_.style['width'] = this.px(width);
      this.bubbleShadow_.style['height'] = this.px(2);
      break;
  }
};

そして、これを使用することができます

var infoBubble = new InfoBubble({
  map: map,
  content: "My Content",
  position: new google.maps.LatLng(1, 1),
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'transparent',
  borderRadius: 7,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 50,
  backgroundClassName: 'infoBubbleBackground',
  arrowStyle: 2

});

最後に、このメソッドを使用してsetBubbleOffset(x,y);InfoBubbleの位置を設定する必要があります

infoBubble.setBubbleOffset(0,-32);
于 2013-03-19T05:48:24.543 に答える
9

infoBubbleライブラリ自体は、デフォルトで、バインドされているマーカーの上にバブルを配置しているように見えます。ライブラリに含まれているサンプルファイルを見てください：http ：//code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/examples/example.html 。特に99行目から122行目までと2つのinfobubblesの使用に注意してください。最初のものはマーカーにバインドされていますが、2番目のものはスタンドアロンであるため、行106が表示されている場合は、マーカーに位置を定義できます。さて、この理解に基づいて、私はこのフィドルhttp://jsfiddle.net/pDFc3/であなたのために例を作成しました。infoBubbleはマーカーの右側に配置されます。

infoBubble jsライブラリにはsetPosition（http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js？ r = 206）1027行目を参照してください。しかし、DOMがロードされるのを待って、移動して位置を変更しようとした後、何らかの理由でinfoBubble.setPosition(newLatLng);動作しません。逆にinfoBubble.getPosition();、DOMのロード後に宣言すると、infoBubbleがバインドされているマーカーの現在の位置がわかります。したがって、setPosition（）はまだ作業中であると信じているため、jsライブラリにバグがある可能性があります（間違っている可能性がありますが、バグがあるだけかもしれません）。

ズームインおよびズームアウトするときの問題を解決し、それに応じてinfoBubbleを配置するようにjsFiddleを修正しました（http://jsfiddle.net/pDFc3/）。最初にロジックを説明しましょう。まず、道路地図タイプのGoogleマップの最大ズームレベルは21です。この値は衛星画像では一貫していませんが、ユーザーが移動できる最大ズームは21です。21から、ズームアウトするたびに2つのポイントの差が次のロジックに基づいて、「画面上」で一貫性を保ちます。

consitent_screen_dist = initial_dist * (2 ^ (21 - zoomlevel))

この場合、初期距離の妥当な値は0.00003度（マーカーとinfoBubbleの間）でした。そこで、このロジックに基づいて、マーカーとinfoBubbleの間の最初の縦方向の距離を見つけるために次の部分を追加しました。

var newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));

同様に、ズームレベルが変更されるたびに距離が一定に保たれるようにするには、ズームレベルの変更をリッスンするときに、新しい経度を宣言するだけです。

    google.maps.event.addListener(map, "zoom_changed", function() {
        newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));
        infoBubble.setPosition(new google.maps.LatLng(marker.getPosition().lat(), newlong));                
    });

メソッドを介して呼び出されるmarker.getPositionおよびその他の値の変数を宣言することで、このコードをはるかに効率的にすることができることに注意してください。メソッド呼び出しが繰り返されず、コードの速度が低下しないようにします。

于 2012-06-05T21:09:58.883 に答える
1

残念ながら、InfoBubbleにはpixelOffsetなどのオプションはありません。ただし、例のマーカーの上にバブルを上に移動したいだけの場合は、バブルの初期化時にマップパラメータを設定しないでください。次のフィドルを考えてみてください（私はあなたのためにそれを修正しました）：

http://jsfiddle.net/ssrP9/5/

PSリソースを適切に追加していなかったため、フィドルが機能しませんでした http://doc.jsfiddle.net/basic/introduction.html#add-resources

于 2012-06-04T15:52:26.093 に答える
1

まったく同じ問題に遭遇したばかりですが、どこにも答えが見つかりませんでした。少し試行錯誤して解決しました。

「infoBubble」にはGo​​ogleJSファイルを使用します。このファイルに移動して、...を検索します。

InfoBubble.prototype.buildDom_ = function() {

私の場合、これは203行目です（ただし、これは以前のシャッフルと編集の結果である可能性があります）。

その関数内に、位置「絶対」宣言が表示されます。新しい行に、marginTop、marginRight、marginBottom、marginLeftを追加できます。これにより、バブルがデフォルトの位置から少しずつ移動します（これは構成内の矢印の位置の宣言にも依存します）...

これは、バブルをマーカーの上に配置するバブルJSファイルのコード調整です（デザイン機能のため）...

var bubble = this.bubble_ = document.createElement('DIV');
bubble.style['position'] = 'absolute';
bubble.style['marginTop'] = this.px(21);
bubble.style['marginLeft'] = this.px(1);
bubble.style['zIndex'] = this.baseZIndex_;

お役に立てば幸いです。

于 2012-10-17T14:40:06.820 に答える
1

InfoBubble buildDom関数に、以下を追加します。

bubble.className = 'bubble-container';

これで、InfoBubbleごとにCSSクラスができたので、CSSマージンを使用してシフトできます。

于 2012-12-15T12:31:47.833 に答える
1

定義されたアンカーの高さを使用することもできます。

var anchorHeight = YOURNUMBER;

874行目infobubble.js

于 2013-04-05T17:39:58.843 に答える