마커 귀하의 웹 사이트에 추가로 2, Google지도는 구글지도를 API-

프로그래밍 언어 2020-03-01 21:02:02 독서 시간: null

당신의 웹 사이트에 마커로 구글지도

 

소개

이 튜토리얼 쇼 당신은 페이지에 간단한 마커 구글 맵을 추가하는 방법에 대해 설명합니다. 그것은 자바 스크립트의 약간의 HTML 및 CSS 초보자 또는 중간 지식을 가진 사람뿐만 아니라 사람에 적합합니다. 고급 가이드지도를 만드는 방법에 대한 읽기  개발자 가이드 .

다음 절에서는이 튜토리얼에서 필요한지도를 작성하는 모든 코드를 보여줍니다.

스스로를보십시오

당신은 클릭 할 수 있습니다 <>코드 창의 오른쪽 상단에 JSFiddle이 코드를 시도 할 수 있습니다.

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
  <span style="color:#3b78e7"><head></span>
    <span style="color:#3b78e7"><style></span>
       <span style="color:#d81b60">/* Set the size of the div element that contains the map */</span>
      #map {
        <span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;  <span style="color:#d81b60">/* The height is 400 pixels */</span>
        <span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;  <span style="color:#d81b60">/* The width is the width of the web page */</span>
       }
    <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
    <span style="color:#d81b60"><!--The div element for the map --></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
    <span style="color:#3b78e7"><script></span>
<span style="color:#d81b60">// Initialize and add the map</span>
<span style="color:#3b78e7">function</span> initMap() {
  <span style="color:#d81b60">// The location of Uluru</span>
  <span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};
  <span style="color:#d81b60">// The map, centered at Uluru</span>
  <span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(
      document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">4</span>, center: uluru});
  <span style="color:#d81b60">// The marker, positioned at Uluru</span>
  <span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({position: uluru, map: map});
}
    <span style="color:#3b78e7"></script></span>
    <span style="color:#d81b60"><!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    --></span>
    <span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
    <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"></script></span>
  <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
 

 

소개

세 페이지에 구글 맵 마커를 만드는 단계 :

  1. HTML 페이지 만들기
  2. 지도를 추가 할 마커를 사용하여
  3. API 키

당신은 웹 브라우저가 필요합니다. 구글 (권장) 크롬, 파이어 폭스, 사파리 또는 Internet Explorer와 같은 플랫폼에 따라, 잘 알려진 브라우저를 선택합니다.

1 단계 : HTML 페이지를 만듭니다

이 코드 기본 HTML 페이지입니다 :

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
  <span style="color:#3b78e7"><head></span>
    <span style="color:#3b78e7"><style></span>
      #map {
        <span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;
        <span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;
        <span style="color:#3b78e7">background-color</span>: grey;
      }
    <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
    <span style="color:#d81b60"><!--The div element for the map --></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
  <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
 

이것은 아주 기본적인 페이지 제목 레벨 세 (대상이므로주의 해주십시오 h3)하는  div요소와 style요소입니다. 당신은 웹에있는 즐겨 찾는 콘텐츠를 추가 할 수 있습니다.

스스로를보십시오

세 개의 버튼의 오른쪽 상단 모서리 위의 샘플 코드입니다. 에 JSFiddle의 예제를 열려면 왼쪽 버튼을 클릭합니다.

코드를 이해

다음 코드는 구실과 HTML 페이지의 몸을 만듭니다.

 

<span style="color:#37474f"><span style="color:#3b78e7"><html></span>
 <span style="color:#3b78e7"><head></span>
 <span style="color:#3b78e7"></head></span>
 <span style="color:#3b78e7"><body></span>
 <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span>
</span>
 

 

 

당신은지도 위의 세 가지 제목을 추가하려면 다음 코드를 사용할 수 있습니다.

 

<span style="color:#37474f"><span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
</span>
 

 

 

다음 코드는 Google지도 페이지의 영역을 정의합니다.

 

<span style="color:#37474f"><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
</span>
 

 

 

튜토리얼의이 단계에서 div당신이지도를 추가하지 않았기 때문에, 따라서 단지 회색 블록으로 표시됩니다. 다음 코드는 크기를 설명하고 색상은 CSS를 설정합니다  div.

 

<span style="color:#37474f"><span style="color:#3b78e7"><style></span>
 #map {
   <span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;
   <span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;
   <span style="color:#3b78e7">background-color</span>: grey;
 }
<span style="color:#3b78e7"></style></span>
</span>
 

 

위의 코드에서, style요소가 제공 div지도 크기. div0 픽셀보다 더 큰 폭 및 높이가되도록지도가 표시된다. 이 경우에, div400 개 픽셀과 100 %의 폭이 높이 설정은 페이지의 전체 폭을 표시한다. 적용  background-color: grey받는 div지도 페이지보기 영역.

2 단계 : 맵 마커 추가

이 섹션에서는 프로그램을 어떻게 웹 페이지에지도 자바 스크립트 API를로드하고,지도에 표시가있는 맵을 추가하기 위해 API를 사용하여 자신의 자바 스크립트, 자바 스크립트를 작성하는 방법.

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span>
  <span style="color:#3b78e7"><head></span>
    <span style="color:#3b78e7"><style></span>
      <span style="color:#d81b60">/* Set the size of the div element that contains the map */</span>
      #map {
        <span style="color:#3b78e7">height</span>: <span style="color:#c53929">400px</span>;  <span style="color:#d81b60">/* The height is 400 pixels */</span>
        <span style="color:#3b78e7">width</span>: <span style="color:#c53929">100%</span>;  <span style="color:#d81b60">/* The width is the width of the web page */</span>
       }
    <span style="color:#3b78e7"></style></span>
  <span style="color:#3b78e7"></head></span>
  <span style="color:#3b78e7"><body></span>
    <span style="color:#3b78e7"><h3></span>My Google Maps Demo<span style="color:#3b78e7"></h3></span>
    <span style="color:#d81b60"><!--The div element for the map --></span>
    <span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span>
    <span style="color:#3b78e7"><script></span>
<span style="color:#d81b60">// Initialize and add the map</span>
<span style="color:#3b78e7">function</span> initMap() {
  <span style="color:#d81b60">// The location of Uluru</span>
  <span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};
  <span style="color:#d81b60">// The map, centered at Uluru</span>
  <span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(
      document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">4</span>, center: uluru});
  <span style="color:#d81b60">// The marker, positioned at Uluru</span>
  <span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({position: uluru, map: map});
}
    <span style="color:#3b78e7"></script></span>
    <span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
    <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
    <span style="color:#3b78e7"></script></span>
  <span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>
 

스스로를보십시오

세 개의 버튼의 오른쪽 상단 모서리 위의 샘플 코드입니다. 에 JSFiddle의 예제를 열려면 왼쪽 버튼을 클릭합니다.

코드를 이해

위의 예는 더 이상 포함되어 있습니다 divCSS 회색 색상. 때문이다 div이제지도가 포함되어 있습니다.

다음 코드에서, scriptAPI는 지정된 URL에서로드됩니다.

 

<span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
  <span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
</span>
 

 

위의 코드에서 callback인수 initMap기능은 API를로드 한 후 실행됩니다. 이 async 속성은 브라우저가 API를로드 할 때 페이지의 나머지 부분을 계속 렌더링 할 수 있습니다. 이 key매개 변수는 API 키가 포함되어 있습니다. 이 튜토리얼 JSFiddle을 시도 , 당신은 당신의 자신의 API 키가 필요하지 않습니다.
참조 API 키, 3 단계 : A는 나중에 자신의 API 키를 설명 얻는 방법에 대한 정보를.

다음 코드에 포함되어 initMap초기화 및 추가 맵은 페이지가로드를 제공합니다. 사용 script포함하는 자신을 포함하는 라벨을 initMap자바 스크립트 함수를.

 

<span style="color:#37474f"><span style="color:#3b78e7"><script></span>
  <span style="color:#3b78e7">function</span> initMap() {
  }
<span style="color:#3b78e7"></script></span>
</span>
 

 

이 추가 getElementById()하는 기능을 div 페이지에있는지도를 찾을 수 있습니다.

다음 코드는 새 Google이 객체를 매핑하고 속성이 중심과지도의 줌 레벨을 포함하는 추가 구성한다. 에 대해 다른 속성 옵션 설명서를 참조하십시오.

 

<span style="color:#37474f">{
  <span style="color:#3b78e7">var</span> uluru = {lat: -<span style="color:#c53929">25.344</span>, lng: <span style="color:#c53929">131.036</span>};

  <span style="color:#3b78e7">var</span> map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {
    zoom: <span style="color:#c53929">4</span>,
    center: uluru
  });

}
</span>
 

 

위의 코드에서, new google.maps.Map()새 Google이 객체를 매핑 만듭니다. 이 center속성은 맵의 API 센터의 위치를 알려줍니다. 다음과 같은 순서로 좌표를지도 :  위도 , 경도를 .
에 대해 알아  지리 좌표 위도 / 경도 좌표 또는 변환 주소를받는 방법에 대한 자세한 내용은.

이 zoom속성은지도의 줌 레벨을 지정합니다. 축소 : 0이 가장 낮은 줌 및 디스플레이 전체 행성이다. 스케일링 값이 너무 높은 높은 해상도로 지구를 과장 할 수있다 세트입니다.

다음 코드는지도에 마커를 배치됩니다. 이 position속성은 위치 표시로 설정되어 있습니다.

 

<span style="color:#37474f"><span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({
  position: uluru,
  map: map
});
</span>
 

 

3 단계 : API 키

이 섹션에서는 확인하기 위해 자신의 API 키를 사용하는 방법에 대해 설명 구글지도 자바 스크립트 API로 응용 프로그램입니다.

다음 단계를 수행 API 키를 받게됩니다 :

  1. 이동  Google 클라우드 플랫폼 콘솔 .

  2. 만들거나 항목을 선택합니다.

  3. 클릭 계속 API와 관련된 모든 서비스를 활성화 할 수 있습니다.

  4. 은 "에서  자격 증명" 페이지하는 얻을 API 키를  (그리고 API 키 제한을 설정). 참고 :이 API 키가있는 경우 제한없는 기존 또는 브라우저의 핵심 제한없이, 당신이 키를 사용할 수 있습니다.

  5. 할당량 도난을 방지하고 API 키를 보호하기 위해, 참조  API 키를 .

  6. (선택 사항) 결제를 사용합니다. 자세한 내용은 사용 제한을 .

  7. 이 튜토리얼의 전체 코드는 텍스트 편집기에서 페이지를 복사합니다. 어떤 텍스트 편집기 경우, 다음과 같은 권장 사항을 참조하십시오 : 당신은 사용할 수 있습니다 : 메모장을 ++ (Windows 용), 텍스트 편집기를 (맥 OS에 적용) (Linux 시스템의 경우) 등의 gedit, KWrite을.

  8. key자신의 API 키를 사용하여 URL에 매개 변수 값을 교체합니다 (즉 API 키 당신은 얻을).

    <span style="color:#37474f"><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
</span>
     

     

  9. 사용 .html 중에서 같은 파일 이름이를 저장, 구글 maps.html .

  10. 데스크톱에서 브라우저로 HTML 파일을 드래그하여 웹 브라우저에로드합니다. 또는, 파일이 대부분의 운영 체제에서 사용할 수있는 두 번 클릭합니다.

팁 및 문제 해결

팁 : 확인 "  매장 검색"에 대한 솔루션  보다 포괄적 인 예는 데이터를 시각화지도를 사용자 정의 마커를 사용하여 볼 수 있습니다.

  • 별도의 창에서 HTML, CSS와 자바 스크립트 코드를 사용하여 JSFiddle 인터페이스에 표시됩니다. 당신은 코드와 "에서 실행할 수있는  결과" 창 디스플레이 출력을.
  • 당신은지도를 사용자 정의 스타일과 속성 옵션을 조정할 수 있습니다. 자기 정의 맵에 대한 자세한 내용은 다음을 참조 스타일 가이드뿐만 아니라  지도를 그리기 .
  • 웹 브라우저 사용하여 개발자 도구가 콘솔 테스트 및 코드를 실행, 오류 보고서 및 해결 코드 문제를 읽어 보시기 바랍니다.
  • 크롬 콘솔에서 열려면 다음과 같은 키보드 단축키를 사용하여
    명령 + 옵션 + (Mac에서) J 또는 (Windows의 경우) 컨트롤 + 시프트 + J.

  • 다음 단계를 수행, Google지도에서 위치의 위도와 경도 좌표를 받게됩니다.

    1. 열기 GOOG 르 브라우저에서지도.
    2. 당신이 필요로하는 위치의 정확한 좌표를지도에 마우스 오른쪽 버튼을 클릭합니다.
    3. 표시되는 상황에 맞는 메뉴에서 , "여기에 무엇입니까  ." 지도는 화면 하단에 카드를 보여줍니다. 카드의 마지막 줄에서 위도와 경도 좌표를 찾아보십시오.

  • 당신은 위도와 경도 좌표로 주소를 변환하는 지오 코딩 서비스를 사용할 수 있습니다. 개발자 가이드 정보를 제공하는 주소 확인 서비스를 사용하기 시작 자세한 내용은.

lwbsleep
게시 10 개 원래 기사 · 원의 칭찬 0 ·은 10000 +를 볼
개인 편지 우려

추천

출처blog.csdn.net/lwbsleep/article/details/104599686
추천
행
반응 라우터 같은 길, 다른 매개 변수 페이지가 새로 고쳐지지 않습니다
, MP의를 mybatisplus의 springboot을 이해하기 간단한
Qtum Qtum, QIP-7 출시 : Qtum 가상 머신 업그레이드, 5 가지 주요 업데이트로 포괄적으로 개발 성능 향상
LeetCode 20191111
어떻게 JSP 루프에 사용 루프 체크 박스에?
《TCP/IP网络编程》阅读笔记--基于TCP的服务器端/客户端
인형 비브라토 자동 일괄 업로드 비디오
파이썬의 os 모듈은 회고
어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)
[Opencv-python] cv2.bitwise_and (...) 이미지 산술 연산-비트 AND 연산
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com