Google マップの InfoWindows をカスタマイズするにはどうすればよいですか?

Google マップ InfoWindows のカスタマイズ

入手可能なドキュメントが限られているため、InfoWindow のスタイル設定が難しい場合があります。 InfoWindow の外観を変更する方法に関する詳細なガイドは次のとおりです。

InfoBubble

1 つのオプションは、機能を超えた広範なスタイル オプションを提供する InfoBubble ライブラリを使用することです。情報ウィンドウの。 InfoBubble を実装するには、次のファイルをインポートします。

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

次のように InfoBubble を設定します。

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  // Styling options
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'transparent',
  arrowStyle: 2
});

infoBubble.open();

情報ウィンドウ カスタム

または、 Google Maps API から GOverlay クラスを拡張して、独自にカスタマイズされた InfoWindow を作成できます。このオプションでは、要素の作成、マップ上への描画、イベントの処理のためのカスタム メソッドを実装する必要があります。

まず、InfoBox クラスを作成します。

function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  // Initialize properties
}

必要なメソッドをオーバーライドします。

InfoBox.prototype = new google.maps.OverlayView();
// Implement createElement, draw, remove, and panMap methods

このアプローチにより、情報ウィンドウの外観と動作をより柔軟にカスタマイズできます。

以上がGoogle マップの InfoWindows をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。