Google マップでは、InfoWindows のスタイル設定に関する限定的なガイドを提供しています。この記事では、これらの要素をカスタマイズする手法について説明します。
InfoWindow の代替となる InfoBubble を使用すると、多くのスタイル オプションを実現できます。
infoBubble = new InfoBubble({ map: map, content: '<div class="mylabel">The label</div>', position: new google.maps.LatLng(-32.0, 149.0), 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();
このスクリプトは GOverlay を拡張し、より柔軟でカスタマイズ可能な情報ウィンドウを作成します。
/* An InfoBox is like an info window, but it displays * under the marker, opens quicker, and has flexible styling. * @param {GLatLng} latlng Point to place bar at * @param {Map} map The map on which to display this InfoBox. * @param {Object} opts Passes configuration options - content, * offsetVertical, offsetHorizontal, className, height, width */ function InfoBox(opts) { google.maps.OverlayView.call(this); this.latlng_ = opts.latlng; this.map_ = opts.map; this.offsetVertical_ = -195; this.offsetHorizontal_ = 0; this.height_ = 165; this.width_ = 266; var me = this; this.boundsChangedListener_ = google.maps.event.addListener(this.map_, "bounds_changed", function() { return me.panMap.apply(me); }); // Once the properties of this OverlayView are initialized, set its map so // that we can display it. This will trigger calls to panes_changed and // draw. this.setMap(this.map_); }
情報ウィンドウ カスタムを使用する場合は、複数のメソッドをオーバーライドする必要がある場合があることに注意してください。
以上がGoogle Maps InfoWindows のスタイルをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。