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

Linda Hamilton
リリース: 2024-11-04 10:54:29
オリジナル
514 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート