구 글 맵 의 간단 한 사용

content {:toc}

구 글 맵 의 간단 한 사용
구 글 지 도 를 사용 하려 면 먼저 구 글 계 정 을 신청 하여 키 를 얻 으 세 요.물론 이런 키 는 인터넷 에서 도 찾 을 수 있 습 니 다.등록 하고 싶 지 않 으 면 검색 소 를 찾 으 세 요.구 글 지 도 를 신청 할 때 핸드폰 번호 가 검증 에 사용 되 지 않 는 다 는 것 을 주의 하 세 요.제 해결 방법 은 지역 을 대만 으로 바 꾸 면 됩 니 다.그림:
키 를 가 져 온 후 공식 문서 에 따라 demo 예제 를 진행 합 니 다.
데모 예시

<html>
  <head>
    <title>Simple click eventtitle>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script type="text/javascript" src="${cdn}/js/jquery-1.9.1.min.js">script>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    style>
  head>
<body>
<div id="map">div>
<script>
  var myLatlng;
  var marker;
  var map ;
  var infowindow;
  function initMap() {
    myLatlng = {lat: 22.579620019918522, lng: 113.8608455657959};

    //     
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: myLatlng
    });

    //     
    marker =new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'my marker'
     });

    //       
    infowindow = new google.maps.InfoWindow();

    marker.addListener('click', function() {
        map.setZoom(15);
        map.setCenter(marker.getPosition());
    });

    map.addListener('click', function(e) {
        console.log("   ："+e.latLng.lat()+"   ："+e.latLng.lng());
    });

    // marker2     
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}
script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Your key&language=cn&callback=initMap">
script>
  body>
html>

demo 설명

id 가 map 인 div 에서 지도 인 스 턴 스 를 만 듭 니 다.google.maps.Map 의 구조 함수 로 map 대상 을 만 듭 니 다.new google.maps.Map(document.getElementById('map'),{인자}}

my Latlng:장 소 를 대표 하 는 위치;lat-위도,lg-경도

맵 의 매개 변수 설명 초기 화

zoom:지도의 크기 조정 단계 입 니 다.

center:지도의 중심 위치

scaleControl:지도의 크기 조정 컨트롤 을 사용 할 지 여부 입 니 다.값 은 boolean 형

입 니 다.

rotateControl:회전 컨트롤 을 사용 할 지,값 은 boolean 형 입 니 다.

안 쓴 거 구 글 지도 에 가서 api 를 보 세 요...

script 링크 매개 변수 설명

key:구 글 맵 에서 신청 한 키

language:언어 설정,cn,en 을 자주 사용 합 니 다

callback:반전 함수,여 기 는 맵 을 초기 화 하 는 데 사 용 됩 니 다.선택 가능

libraries:사용 할 콘 텐 츠 라 이브 러 리 입 니 다.선택 가능

async defer:동기 화 작업 을 하지 않 습 니 다.즉,지 도 를 렌 더 링 하 는 동시에 다른 로드 작업 을 허용 합 니 다.

marker 생 성

google.maps.Marker 를 사용 하여 대상 을 만 듭 니 다.형식 은 marker=new google.maps.Marker({매개 변수:value})입 니 다.

marker 매개 변수 설명

position:marker 의 위치,즉 Latlg 를 값 으로 사용 합 니 다.예 를 들 어{lat:22.579620019918522,lg:113.8608455579559}

map:속 한 map 지도,Map 유형

제목:제목,String 유형

icon:값 이 String 이면 이 string 을 URL 로 하 는 그림 을 marker 그림 으로 표시 합 니 다

…

marker 방법

marker 제거:지도 에 있 는 태그 제거marker.setMap(null);맵 을 null 로 설정 하면 제거 할 수 있 습 니 다.

marker.getPosition():표 시 된 LatLng 대상,즉 표 시 된 위치 가 져 오기

marker.addListener('click',function(){//doth}):marker 에 클릭 이 벤트 를 추가 하고 나머지 이벤트 목록 은 api

참조

。。。

맵 방법

map.setZoom(int):map 의 크기 조정 매개 변수 등급 설정

map.set Center(LatLng):map 의 중심 설정

map.panTo(LatLng):map 시각 영역 을 LatLng 중심 으로 이동

map.addListener('click',function(e){//doth}):map 에 클릭 이 벤트 를 추가 합 니 다.이벤트 목록 자세 한 내용 은 api 참조.그 중에서 매개 변수 e.latLng 은 LatLng 대상 을 얻 기 위해e.latLng.lat()즉 클릭 위치의 위 도 를 나타 낸다.

。。。。

infowindow 생 성

new google.maps.InfoWindow()를 사용 하여 infowindow 대상 을 만 들 고 정 보 를 보 여 주 는 창

infowindow 방법

infowindow.setContent(place.name);:창의 내용 을 설정 합 니 다.

infowindow.open(map, this);:현재 예제 와 결합 하여 이 marker 에서 창 을 엽 니 다

。。。

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Is Eclipse IDE dying?

In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

구 글 맵 의 간단 한 사용

좋은 웹페이지 즐겨찾기