JavaScript에서 Google Maps API를 사용하여 대화형 지도를 설정하는 방법-프런트엔드 Q&A-php.cn

JavaScript에서 Google Maps API를 사용하여 대화형 지도를 설정하는 방법

PHPz

풀어 주다： 2023-04-26 13:49:40

원래의

838명이 탐색했습니다.

웹 네트워크의 발전과 함께 강력한 프로그래밍 언어인 JavaScript는 필연적인 부분이 되었습니다. JavaScript에서는 Google Maps API를 사용하여 대화형 지도를 만들 수 있습니다. 이는 특히 온라인 비즈니스에서 매우 유용한 기능입니다. 이 문서에서는 JavaScript에서 Google Maps API를 사용하여 대화형 지도를 설정하는 방법을 설명합니다.

1단계: Google 지도 API 키 받기

먼저, 자체 Google 지도 API 키를 받아야 합니다. API 키를 사용하면 Google Maps API를 사용할 수 있습니다.

API 키를 얻으려면 먼저 Google Cloud 계정을 생성하세요. 계정을 생성한 후 Google Cloud Console 페이지로 이동해야 합니다. 여기에서 Google Maps API 키를 생성할 수 있습니다.

2단계: 지도 만들기

다음으로 HTML 파일로 지도를 만들어야 합니다. HTML 파일에 다음 코드를 추가하면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <title>设置地图</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        /* 添加样式，设置地图大小 */
        #map {
          height: 400px;
          width: 100%;
         }
    </style>
  </head>
  <body>
    <h3>这是一个简单的地图</h3>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>  
    <script>
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
            zoom: 8
          });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
  </body>
</html>

로그인 후 복사

위 HTML 파일에서는 div 요소를 사용하여 지도 크기를 설정했습니다. 다음으로 JavaScript 코드에서는 위도 및 경도(YOUR_LATITUDE 및 YOUR_LONGITUDE)와 함께 API 키를 사용하여 지도의 중심점과 확대/축소 수준을 설정했습니다. 마지막으로 initMap() 함수를 API에 콜백 함수로 전달하여 API가 지도 로드를 완료하면 자동으로 호출되도록 합니다.

3단계: 마커 추가

Google Maps API를 사용하면 지도에 마커를 추가할 수도 있습니다. 관심 있는 위치를 표시하기 위해 지도에 마커를 설정할 수 있습니다.

다음으로 JavaScript 코드에 다음 코드를 추가해야 합니다.

var marker = new google.maps.Marker({
    position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
    map: map,
    title: '这里是我的标记!'
});

로그인 후 복사

위 코드는 지도에 마커를 설정하고 제목을 "Here is my marker!"로 설정합니다. 귀하의 위도와 경도는 표시할 위치 지점의 위도와 경도입니다.

4단계: 정보 창 추가

정보 창을 사용하면 마크에 더 유용한 정보를 추가할 수 있습니다. 마커를 클릭하면 정보 창을 열어 더 많은 정보를 표시할 수 있습니다.

다음으로 JavaScript 코드에 다음 코드를 추가해야 합니다.

var contentString = '<h3>这是我的标记!</h3><p>这里是更多的信息...</p>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

로그인 후 복사

위 코드는 정보 창에 표시할 제목과 내용이 포함된 "contentString"이라는 문자열을 생성합니다. 다음으로, contentString 문자열의 내용을 포함하는 "infowindow"라는 정보 창을 만듭니다.

마지막으로 마커를 클릭하면 정보 창이 열리도록 이벤트를 마커에 바인딩합니다.

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

로그인 후 복사

위 코드는 발표자를 클릭하면 정보창이 열립니다.

요약하자면 JavaScript에서 Google Maps API를 사용하여 대화형 지도를 설정하고 마커와 정보 창을 추가하는 방법을 볼 수 있습니다. 이러한 기능은 다양한 유형의 온라인 애플리케이션에 매우 유용한 매핑 기능을 제공할 수 있습니다.

위 내용은 JavaScript에서 Google Maps API를 사용하여 대화형 지도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!