> 웹 프론트엔드 > CSS 튜토리얼 > Google Maps InfoWindows의 스타일을 어떻게 맞춤설정할 수 있나요?

Google Maps InfoWindows의 스타일을 어떻게 맞춤설정할 수 있나요?

Patricia Arquette
풀어 주다: 2024-11-05 08:09:02
원래의
1074명이 탐색했습니다.

How can I customize the styling of Google Maps InfoWindows?

Google 지도 InfoWindows 스타일 지정

Google 지도는 InfoWindows 스타일 지정에 대한 제한된 가이드를 제공합니다. 이 기사에서는 이러한 요소를 사용자 정의하는 기술을 살펴봅니다.

InfoBubble

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿