는 어떻게 '마커'와 아래의 코드에 '정보창'인스턴스 일이야?

Question

나는 자바 스크립트 멍청한 놈이다. 그러나 나는 자바에 가장 익숙하다. 인스턴스가

var marker = new Marker({ 
       position:props.coords, 
       map:map, 
       //icon:props.iconImage 
       }); 

대신

var marker = new google.maps.Marker({ 
      position:props.coords, 
      map:map, 
      //icon:props.iconImage 
      }); 

및

var infoWindow = new InfoWindow({ 
        content:props.content 

       }); 

대신 여기

var infoWindow = new google.maps.InfoWindow({ 
        content:props.content 

       }); 

이처럼 작성되지 않은 이유를 내가 이해하지 못하는 것은 전체 코드

function addMarker(props){ 
      var marker = new google.maps.Marker({ 
      position:props.coords, 
      map:map, 
      //icon:props.iconImage 
      }); 

      // Check for customicon 
      if(props.iconImage){ 
       // Set icon image 
       marker.setIcon(props.iconImage); 
      } 

      // Check content 
      if(props.content){ 
       var infoWindow = new google.maps.InfoWindow({ 
        content:props.content 

       }); 

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

     } 

API를 사용하고 있기 때문에 이런 식으로 추측하고 있지만 왜 이런 식으로해야하는지에 대해 더 잘 이해하고 싶습니다.

Answer 1

당신은 당신의 파일의 내부 import 에드했을 자바 클래스로 마커 및 InfoWindow는을 사용하고 싶습니다. 자, import 같은 것이 없습니다 (사실은 있지만 현재 브라우저 환경에는 존재하지 않습니다).

어쨌든, 자바 스크립트, 모든 객체이다. Javascript 객체를 자바의지도로 생각할 수 있습니다. 기본적으로 키 - 값 구조입니다.

어딘가, 사용중인 Google지도 라이브러리 코드 내에 google이라는 객체가 정의되어 있습니다. 지도라는 키가 포함되어 있으며지도에는 개체가 포함되어 있습니다. 차례로이 객체는 Marker 및 InfoWindow과 구글 맵 라이브러리에 대한 정의가 포함되어 있습니다.

사실은 다음과 같을 수 있습니다 : 당신이 그 점 표기법이 필요한 이유

var gooogle = { 
    maps: { 
    Marker: /* definition of Marker */, 
    InfoWindow: /* definition of InfoWindow */, 
    // ... 
    }  
} 

있다고. 실제로 가져온 라이브러리에 의해 선언 된 google 객체의 하위 하위 키에 액세스하고 있습니다.