Google 지도 InfoWindow 프레젠테이션을 어떻게 맞춤설정할 수 있나요?

Google 지도 InfoWindow 표시 맞춤설정

Google 지도에서 InfoWindow 스타일을 지정하는 것은 제한된 문서로 인해 어려울 수 있습니다. 다행히 원하는 사용자 정의를 달성하기 위한 다양한 접근 방식이 있습니다.

InfoBubble 클래스

Google은 InfoWindow의 대안으로 InfoBubble 클래스를 제공합니다. InfoBubble은 스타일이 매우 다양하므로 backgroundColor, borderRadius 및 arrowStyle과 같은 속성을 통해 모양을 사용자 지정할 수 있습니다. 예는 다음과 같습니다.

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10
});

infoBubble.open();

정보 창 사용자 정의(OverlayView)

또 다른 접근 방식은 Google Maps API의 GOverlay 클래스를 확장하고 이를 기반으로 사용하는 것입니다. 맞춤형 정보창. 이 방법은 더 큰 유연성을 제공하며 createElement, draw 및 panMap과 같은 방법을 구현해야 합니다.

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  ...
}

InfoBox.prototype = new google.maps.OverlayView();

이 방법을 사용하여 완전한 기능을 갖춘 사용자 정의 정보 창을 만들려면 필수 방법을 재정의해야 합니다.

JavaScript로 InfoWindow 요소 수정

JavaScript(또는 jQuery)를 사용하여 InfoWindow의 요소를 동적으로 수정할 수도 있습니다. InfoWindow에서 요소를 조작하면 어느 정도 사용자 정의가 가능합니다.

위 내용은 Google 지도 InfoWindow 프레젠테이션을 어떻게 맞춤설정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!