새로운 업무!
기존 비플페이-가맹점 지도로 찾기에서 사용하고 있던 네이버맵 API에 대한 조사하는 업무가 주어졌다!
•
그러니까 음,, 네이버맵을 사용하면서 어색하고 불편했던거 개선하는 차원에서!
주로
•
길찾기 기능을 제공하는지 확인
◦
기존 앱에서는 현재위치와 목적지 간에 로드맵을 지원해주지 않고 있었다.
◦
그래서 기능을 한번 조사해보자 (유료인지 확인하구!)
•
네이버맵 API에 주소 값을 param 값으로 보내서 가게 상세 정보를 얻거나 볼 수 있는지 확인
•
지도 상에서 위치를 막 돌리고 나서, 현재위치를 누르면 다시 원상복귀가 되는지 확인
•
가맹점 마커를 클릭했을 때 마커 크기 변경시키기
•
가맹점 찾기 → 가맹점 선택 → 지도보기 버튼 클릭
◦
해당 페이지에서 map 현재위치 표시하기 버튼을 클릭했을 때, 주변 모든 가맹점 마커가 나타나는 문제 해결
◦
(선택한 가게만 마커로 나타나도록 수정)
차근차근 해보자!
네이버 지도 API
네이버 맵스가 제공하는 기능
요금 안내
서비스 구분 | 과금 기준 | 과금 구간 | 요금 | 비고 | 상품 설명 | 최대 이용 한도 (Client ID당 월간 이용 가능한 횟수) |
Moblie Dynamic Map | 이용 횟수 | 100,000,000건 이하 | 무료 | - | 네이버 지도 애플리케이션에서 사용하는 벡터 지도를 제공 | 100,000,000건 |
Moblie Dynamic Map | 이용 횟수 | 100,000,000건 초과 | 별도 협의 | - | 네이버 지도 애플리케이션에서 사용하는 벡터 지도를 제공 | 100,000,000건 |
Geocoding | 이용 횟수 | 3,000,000건 이하 | 무료 | 대표 계정 1개에 한해 월 3,000,000건의 무료 이용량을 제공합니다. | 입력한 주소를 검색하여 좌표를 포함한 상세 정보 제공 | 3,000,000건 |
Geocoding | 이용 횟수 | 3,000,000건 초과 | 0.5원 | 대표 계정 1개에 한해 월 3,000,000건의 무료 이용량을 제공합니다. | 입력한 주소를 검색하여 좌표를 포함한 상세 정보 제공 | 3,000,000건 |
Reverse Geocoding | 이용 횟수 | 3,000,000건 이하 | 무료 | 대표 계정 1개에 한해 월 3,000,000건의 무료 이용량을 제공합니다. | 좌표를 검색하여 법정동, 행정동, 지번 주소, 도로명 주소 등 주소 정보 제공 | 3,000,000건 |
Reverse Geocoding | 이용 횟수 | 3,000,000건 초과 | 0.5원 | 대표 계정 1개에 한해 월 3,000,000건의 무료 이용량을 제공합니다. | 좌표를 검색하여 법정동, 행정동, 지번 주소, 도로명 주소 등 주소 정보 제공 | 3,000,000건 |
Maps 이용요금은 요청된 호출 수 기준으로 부과된다.
1. 길찾기 기능을 제공하는지?
Path - 경로선 오버레이
Multipart Path - 경로선 오버레이
Arrowhead Path - 화살표 모양 오버레이
→ 이것 역시 URL Scheme을 사용으로 대체 가능
•
그치만 앱 이탈 가능성이 높아진다,,
URL Scheme 활용
•
길찾기
◦
대중교통 길찾기
◦
자동차 길찾기
◦
도보 길찾기
◦
자전거 길찾기
2. 네이버 API에 주소 값을 param 값으로 보내서 가맹점 상세 정보를 얻거나 볼 수 있는지 확인
•
장소의 상세 정보를 얻기 위해서는 네이버 검색 API를 활용해야 한다.
네이버 지도 앱으로 넘어가서 보고 싶은 경우
1) 모바일 앱
•
네이버 지도 URL Scheme을 사용하기 위해 iOS 앱에서 작성해야 하는 코드
•
info.plist에 LSApplicationQueriesSchemes 를 생성하고 nmap을 추가
<key>LSApplicationQueriesSchemes</key>
<array>
<string>nmap</string>
</array>
XML
복사
•
다음과 같이 canOpenURL 을 호출해 네이버 지도 앱이 설치되어 있는지 확인하고, 설치되어 있지 않으면 App Store로 이동
let url = URL(string: "nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}")!
let appStoreURL = URL(string: "http://itunes.apple.com/app/id311867728?mt=8")!
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
} else {
UIApplication.shared.open(appStoreURL)
}
Swift
복사
2) 모바일 웹
모바일 웹에서 네이버 지도 URL Scheme을 사용하려면 네이버 지도 앱을 설치하도록 구현해야 한다.
•
다음과 같이 웹 페이지에서 JavaScript 타이머를 이용해 App Store로 분산시키는 방법 사용
<script>
function openNaverMapApp(url) {
var clickedAt = +new Date();
location.href = url;
setTimeout(function() {
if (+new Date() - clickedAt < 2000) {
location.href = 'http://itunes.apple.com/app/id311867728?mt=8';
}
}, 1500);
}
window.onload = function() {
openNaverMapApp("nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}");
};
</script>
HTML
복사
URL Scheme 활용
•
지도 앱 메인 화면 표시
•
지도 검색
◦
지도 통합 검색
◦
버스 검색
•
마커 표시
•
내비게이션
3. N/S 방향 바뀌었을 때 다시 돌려주는 기능
.gif&blockId=4cd8b74a-39e1-4c8c-b329-28782581484c)
제스처
•
회전 : 두 개의 손가락으로 지도를 돌리면 베어링 각도가 바뀐다.
◦
rotateGestureEnabled 속성으로 활성화 여부를 지정할 수 있다.
mapView.isRotateGestureEnabled = false
Swift
복사
4. 마커를 클릭했을 때, 마커 크기 변경 시키기
마커 크기
•
width 와 height 속성을 지정해 마커 아이콘의 크기를 변경할 수 있다.
marker.width = 25
marker.height = 40
Swift
복사
•
width 와 height 를 기본값인 NMF_MARKER_SIZE_AUTO 로 지정할 경우, 너비 또는 높이가 이미지의 크기에 맞춰진다.
마커의 아이콘 크기를 자동으로 지정하는 코드
marker.width = CGFloat(NMF_MARKER_SIZE_AUTO)
marker.height = CGFloat(NMF_MARKER_SIZE_AUTO)
Swift
복사
5. 가맹점 찾기 → 가맹점 선택 → 지도보기 버튼 클릭
•
해당 페이지에서 map 현위치 표시하기 버튼을 클릭했을 때 주변 모든 가맹점 마커가 나타나는 문제 해결
•
(선택한 가맹점만 마커로 나타나도록 수정)
겹침
marker.isHideCollidedSymbols = true
Swift
복사
marker.isHideCollidedMarkers = true
Swift
복사