Google Maps JS API v3을 사용하여 사용자 정의 InfoWindows가 포함된 여러 마커를 Google 지도에 쉽게 추가하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Google Maps JS API v3을 사용하여 사용자 정의 InfoWindows가 포함된 여러 마커를 Google 지도에 쉽게 추가하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-18 17:00:11

원래의

143명이 탐색했습니다.

How to Easily Add Multiple Markers with Custom InfoWindows to a Google Map using the Google Maps JS API v3?

Google Maps JS API v3 - 여러 마커에 대한 간단한 예

Google 지도에서 여러 마커를 만드는 것은 특히 어려운 작업이 될 수 있습니다. API를 처음 접하는 사람들을 위한 것입니다. 이 프로세스를 단순화하기 위해 필요한 단계를 안내하는 간단한 예를 살펴보겠습니다.

Google에서 제공하는 다음 데이터 배열을 고려하세요.

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

로그인 후 복사

목표는 플롯을 그리는 것입니다. 이러한 마커를 지도에 표시하고 마커를 클릭하면 이름이 포함된 infoWindow를 표시합니다.

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div>

로그인 후 복사

이 코드는 지도를 중심으로 지도를 생성합니다. 확대/축소 수준이 10인 호주 시드니. 배열의 각 해변에 대한 마커를 동적으로 생성하고 각 마커는 클릭 시 해변 이름이 포함된 infoWindow를 표시합니다.

클릭 이벤트에 대한 이벤트 리스너에 유의하세요. 클로저를 사용하여 콜백 함수 실행 중에 마커 및 배열 인덱스의 값을 보존합니다.

이 단계를 따르면 사용자 정의 infoWindows가 포함된 여러 마커를 쉽게 추가할 수 있습니다. Google 지도 시각화를 소유하세요.

위 내용은 Google Maps JS API v3을 사용하여 사용자 정의 InfoWindows가 포함된 여러 마커를 Google 지도에 쉽게 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!