Google 지도 InfoWindows를 어떻게 사용자 정의할 수 있나요?-CSS 튜토리얼-php.cn

Google 지도 InfoWindows를 어떻게 사용자 정의할 수 있나요?

Linda Hamilton

풀어 주다： 2024-11-04 10:54:29

원래의

590명이 탐색했습니다.

How Can I Customize Google Maps InfoWindows?

Google 지도 InfoWindows 맞춤설정

사용 가능한 문서가 제한되어 있기 때문에 InfoWindow 스타일을 지정하는 것이 어려울 수 있습니다. InfoWindow의 모양을 수정하는 방법에 대한 자세한 가이드는 다음과 같습니다.

InfoBubble

한 가지 옵션은 기능 이상의 광범위한 스타일 옵션을 제공하는 InfoBubble 라이브러리를 사용하는 것입니다. InfoWindow의 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();

로그인 후 복사

Info Window Custom

또는, 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

로그인 후 복사

이 접근 방식은 InfoWindow의 모양과 동작을 사용자 지정하는 데 더 큰 유연성을 제공합니다.

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