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