Google マップの InfoWindows をカスタマイズするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-04 10:54:29

オリジナル

551 人が閲覧しました

How Can I Customize Google Maps 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 サイトの他の関連記事を参照してください。