/ REACT

Google Map API React에서 사용하기 (3)

1. 추가 응용

기존 사용 했던 Map 에서 initialCenter 에는 기본적으로 출력해줄 중앙 좌표값을 설정할수 있습니다.

기본적으로 {lat : number, lng: number} 형태의 데이터가 필요하며,

추후 center 포지션을 바꾸고자 할때는 setCenter() 함수의 사용시 유동적으로 변경 가능합니다.

위 설명으로 간단한 예제를 만들어보면..

    onChangePosition = (lat, lng) => {
      let map = this.mapRef.map;
      let position = new google.maps.LatLng(lat, lng);
      map.setCenter(position);
    }

    initDefaultPosition = () => {
      let defaultPosition = {lat:0 lng:0};
      this.setState({
        initPos = defaultPosition
      });
    }

이런식으로 간단한 함수를 만들어서 기본 중앙 좌표값 설정 및

특정 좌표로 중앙값 이동이 가능합니다.

추가적으로 좌표와 좌표간의 거리를 알고자한다면

((ACOS( SIN( data.x * PI() / 180) * SIN(data2.x * PI() / 180) + COS( data.x * PI() / 180) * COS(data2.x * PI() / 180) * COS(( data.y - data2.y) * PI() / 180)) * 180 / PI()) * 60 * 1.1515)

을 통해 data와 data2의 거리를 mile로 표현 할 수 있습니다.

JAVASCRIPT, REACT, NODE, GOOGLE, MAP