Google Maps JS API v3에서 여러 마커와 정보 창을 쉽게 표시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Google Maps JS API v3에서 여러 마커와 정보 창을 쉽게 표시하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-20 17:12:10

원래의

802명이 탐색했습니다.

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Google Maps JS API v3의 다중 마커 표시

소개

Google 지도에 여러 마커를 표시하는 것은 의미가 없습니다. 도전; 그러나 초보자에게는 여러 튜토리얼이 지나치게 복잡해 보일 수 있습니다. 이 글에서는 마커를 플로팅하고 클릭 시 정보 창을 표시하는 간단한 접근 방식을 제시합니다.

접근 방법

1. 마커 데이터 얻기:

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]
];

로그인 후 복사

2. 지도 초기화:

div 요소 내에서 새 Google 지도를 인스턴스화하여 확대/축소, 중심, 지도 유형 등의 옵션을 제공합니다.

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

로그인 후 복사

3. 마커 및 정보 창 추가:

위치 배열을 반복하고 각 위치에 대한 마커를 만듭니다. 마커를 클릭하면 위치 이름과 함께 정보 창이 표시됩니다.

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
 
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

로그인 후 복사

예제 코드

다음 전체 코드 조각은 구현을 보여줍니다.

<!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>

로그인 후 복사

추가 고려 사항