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

Google Maps InfoWindows 스타일 지정

Google Maps InfoWindows의 모양을 맞춤설정하는 것은 제한된 문서로 인해 어려울 수 있습니다. 그러나 원하는 스타일을 얻는 데 사용할 수 있는 방법은 다양합니다.

InfoBubble 사용

InfoWindow에 비해 유연성을 높이려면 InfoBubble 클래스를 사용하는 것이 좋습니다. 참조 파일을 가져오면 사용자 정의 가능한 속성을 통해 고급 스타일 옵션에 액세스할 수 있습니다. 예:

<code class="javascript">infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  ...  // Custom styling options
});</code>

GOverlay 확장

InfoWindow의 모양을 더 효과적으로 제어하려면 GOverlay 클래스를 확장하세요. 이 접근 방식을 사용하면 위치, 크기 및 스타일을 정의하여 지도에 맞춤 div를 그릴 수 있습니다. 다음은 InfoWindow 확장의 예입니다.

<code class="javascript">function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  ...  // Initialize properties

  // Override methods
  InfoBox.prototype = new google.maps.OverlayView();
  // Implement createElement, draw, remove, and panMap methods
}</code>

InfoWindow 요소 수정

또 다른 옵션은 JavaScript 또는 jQuery를 사용하여 InfoWindow의 요소를 직접 수정하는 것입니다. 필요한 요소에 액세스하고 스타일 적용:

<code class="javascript">var infowindow = new google.maps.InfoWindow();
$('#content').attr('style', 'background-color: #000');</code>

이 접근 방식은 InfoBubble을 사용하거나 GOverlay를 확장하는 것보다 제어력이 떨어지지만 사소한 스타일 수정에는 더 간단할 수 있습니다.

위 내용은 Google Maps InfoWindows의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!