JavaScript를 사용하여 Google 지도에서 InfoWindows로 여러 마커를 쉽게 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 Google 지도에서 InfoWindows로 여러 마커를 쉽게 구현하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-12-31 04:22:09

원래의

901명이 탐색했습니다.

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

JavaScript로 간단한 Google 지도 다중 마커 구현

이 튜토리얼에서는 Google 지도에서 여러 마커를 만드는 간단한 접근 방식을 살펴보겠습니다. 지도.

개요

Google Maps API를 탐색하는 초보자의 경우 지도에 여러 마커를 그리는 것이 복잡해 보일 수 있습니다. 이 튜토리얼은 간단하고 간단한 솔루션을 제공합니다.

예제 데이터

Google의 샘플 데이터 배열을 사용해 보겠습니다.

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

로그인 후 복사

지도

먼저 Google을 초기화합니다. 지도:

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

로그인 후 복사

마커 만들기

여러 마커를 만들려면 위치 배열을 반복합니다.

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

로그인 후 복사

추가 팝업 정보창

우리는 클릭 시 해변 이름을 표시하는 각 마커에 대한 InfoWindow:

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

로그인 후 복사

전체 결과

아래 전체 코드 스니펫에는 다중 마커 기능에 필요한 모든 요소가 포함되어 있습니다. :

// HTML with map container
<!DOCTYPE html>
<html> 
<head> 
  <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>

로그인 후 복사

다음 단계를 따르면 팝업으로 여러 마커를 쉽게 그릴 수 있습니다. Google 지도의 InfoWindows.

위 내용은 JavaScript를 사용하여 Google 지도에서 InfoWindows로 여러 마커를 쉽게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!