2. 이벤트 구성하기

Naver Maps 라이브러리를 활용하여 사용자의 현재 위치를 기준으로 지도를 그리는 방법에 대해 알아보겠습니다.

개발하기

Naver Map을 사용하여 사용자의 현재 위치를 기준으로 지도를 로드하려면 다음 과정을 따라야 합니다.

Naver Maps API 라이브러리 로드 - Load_NaverMapScript
사용자 위치정보 수집 -GetGPS
지도 생성 - Load_NaverMap

본 실습을 위해서는 [심화실습]-[Naver Map 그려주기]에서 발급받은 네이버 클라이언트 아이디(Client ID)가 필요합니다.

Naver Maps API 라이브러리 로드

Naver Map을 사용하기 위해서는 먼저 Naver Maps JavaScript API v3 라이브러리를 로드하는 이벤트를 Load_NaverMapScript로 생성해 주도록 하겠습니다.

Flextudio의 기능 중 f.Script.load() 함수를 사용하여 외부 스크립트 라이브러리를 로드할 수 있습니다. 또한 함수자동생성 → Flex유틸 → 라이브러리를 선택을 통해 아래와 같이 간단하게 생성할 수 있습니다.

스크립트 URL:Naver Maps JavaScript API v3를 로드하기 위한 URL을 지정합니다. 이 URL의 YOUR_CLIENT_ID 부분에는 실제로 발급받은 네이버 클라이언트 아이디(Client ID)를 입력해야 합니다.

https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID

로드 후 실행 이벤트: 라이브러리 로드 후 실행할 이벤트를 지정합니다. 이 실습에서는 GetGPS라는 이벤트를 설정하여, 라이브러리가 로드된 후 사용자의 위치 정보를 수집하는 기능을 바로 시작할 수 있도록 합니다.
요청 후 대기여부: 스크립트 로드가 동기적으로 실행될지, 비동기적으로 실행될지를 선택할 수 있습니다. 비동기 실행을 통해 페이지 로딩 시간에 영향을 주지 않고, 백그라운드에서 스크립트를 로드할 수 있습니다.
이 실습에서는 체크를 해제하여 스크립트 로드가 비동기적으로 실행되도록 합니다.

이러한 설정을 완료하고 나면, 자동으로 Naver Maps API를 로드하는 함수를 생성합니다. 이 함수는 외부 스크립트를 효율적으로 로드하고, 설정된 이벤트를 적절히 트리거할 수 있도록 구성됩니다.

생성된 스크립트

f.Script.load('https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID','GetGPS',null);

현재 위치정보 가져오기

사용자의 위치정보을 가져오는 이벤트를 GetGPS로 생성해주도록 하겠습니다.

Flextudio의 기능 중 f.Native.getGPS() 함수를 사용하여 사용자의 위치정보를 가져올 수 있습니다. 또한 함수자동생성 → 모바일 기능 → GPS를 선택을 통해 아래와 같이 간단하게 생성할 수 있습니다.

요청 후 대기여부: 스크립트 로드가 동기적으로 실행될지, 비동기적으로 실행될지를 선택할 수 있습니다. 비동기 실행을 통해 페이지 로딩 시간에 영향을 주지 않고, 백그라운드에서 스크립트를 로드할 수 있습니다.

이 실습에서는 체크를 해제하여 스크립트 로드가 비동기적으로 실행되도록 합니다.

실행 이벤트: 사용자 위치정보를 수집한 후 실행될 이벤트를 지정합니다. 이 실습에서는 Load_NaverMap라는 이벤트를 설정해여, 사용자 위치정보를 수집한 후 지도를 그려주는 이벤트가 실행되도록 합니다.

이러한 설정을 완료하고 나면, 자동으로 사용자 위치정보를 수집하는 함수를 생성합니다. 이 함수는 사용자 위치정보를 수집하고, 설정된 이벤트를 적절히 트리거할 수 있도록 구성됩니다.

생성된 스크립트

f.Native.getGPS(null,'Load_NaverMap',true);

현재 위치정보를 기반으로 지도 생성

받아온 위치정보를 기반으로 Embed에 생성한 컨테이너 객체에 지도를 그려주는 이벤트를 Load_NaverMap 로 생성해주도록 하겠습니다.

f.Native.getGPS() 를 사용하여 가져온 사용자의 위치 정보는 f.GPS(링크예정) 객체를 통해 접근할 수 있으며, 해당 객체에서 위도와 경도 값을 추출할 수 있습니다.

스크립트를 통해 f.GPS값을 활용하여 Embed에 생성한 div에 지도를 그려주도록 하겠습니다.

만약 GPS 값이 제대로 수집되지 않는경우 지도를 그려주기위해 값이 없는경우 고정값을 기준으로 지도가 그려지도록 position을 생성해줍니다.

let userLatitude = f.GPS.latitude || 37.557;
let userLongitude = f.GPS.longitude || 126.864111;

// 사용자의 위치 또는 기본 위치를 중심으로 지도 생성
let map = new naver.maps.Map('naverMap', {
    center: new naver.maps.LatLng(userLatitude, userLongitude),
    zoom: 16
});

// 사용자 위치에 마커 생성  
var userMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(userLatitude, userLongitude),
    map: map,
    icon: {
        url:"../public/imagesCommon/icon/C_001_019.svg"  ,
    	size: new naver.maps.Size(50, 52),
    	origin: new naver.maps.Point(0, 0),
    	anchor: new naver.maps.Point(25, 26)
    }
});