Kakao Map API P1. Get Address info by Lat long


#1

Giới thiệu

Hiện tại ở Hàn Quốc có một vài công ty cung cấp dịch vụ API về map, tiêu biểu là

  1. Kakao (trực thuộc Daum Corp)
  2. Naver
  3. T-map (trực thuộc Tập đoàn SKT

Hnay tôi sẽ chia sẻ với các bạn api của Kakao map, là API về address đang phổ biến nhất tại Hàn Quốc.

Một số công ty nước ngoài có dùng Google map API để áp dụng tại Hàn Quốc nhưng hiệu quả không tốt vì Hàn Quốc có 2 thông tin địa chỉ (Jibun và Road) tại một nơi.

Khi các bạn làm việc trong các dự án Hàn Quốc, và liên quan tới thông tin về địa chỉ, hoặc dùng map làm nền tảng dịch vụ thì nhất định các bạn phải biết về các API và library của Kakao map. Vì dịch vụ của họ đáp ứng đúng nhất thông tin địa chỉ ở tại bản địa.

Trong post đầu tiên tôi sẽ chia sẻ JS code được dùng để lấy thông tin tọa độ rồi gọi thông tin địa chỉ
(Trong code sẽ có các comment)

Cách tạo API key trong developer.kakao.com

API Javascript của Kakao Maps chỉ có thể được sử dụng sau khi khóa được cấp.
Và để nhận được key, bạn cần có tài khoản Kakao.

** Các step để tạo api key

  1. Truy cập trang web của nhà phát triển Kakao (https://developers.kakao.com)
  2. Đăng ký làm developer ID và tạo Application
  3. Thêm Web Platform: Chọn ứng dụng- [Nền tảng] - [Đăng ký nền tảng web] -Đăng ký miền trang web
  4. Đăng ký tên miền trang: Chọn nền tảng [Web] và đăng ký [Tên miền trang]. (Ví dụ: http: // localhost: 8080)
  5. Sử dụng [khóa JavaScript] ở đầu trang làm khóa ứng dụng của API bản đồ.
  6. Chạy ứng dụng.

Mở tệp trên bằng cách chạy máy chủ web trong miền đã đăng ký (ví dụ: http: // localhost: 8080).

# Trên máy tính đã cài đặt Python, hãy chuyển đến thư mục
$ cd /path/to/your/folder/

# Bạn có thể chạy máy chủ web để thử nghiệm như sau:.
$ python -m SimpleHTTPServer 8080

Mở trình duyệt và kết nối với miền trên.
API bản đồ chỉ có thể được sử dụng trong miền trang web đã đăng ký, vì vậy hãy đảm bảo đăng ký.

Nhấp vào hình chìa khóa trên menu bên trái để chuyển đến Ứng dụng của tôi. Nếu bạn chưa có chìa khóa, hãy truy cập trang và nhận chìa khóa.

0. Gọi Library

Cần gọi thêm library về mới có thể sử dụng được kakao map. Thêm parameter và load như sau

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=LIBRARY"></script>

Bạn có thể tải thư viện bằng cách viết tên thư viện bạn muốn sử dụng trong phần mã thông báo LIBRARY.

<!-- Gọi services Library   -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services"></script>
<!-- Gọi services và clusterer, drawing library -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services,clusterer,drawing"></script>

1. JS code

var mapContainer = document.getElementById('map'), // div biểu thị map 
    mapOption = {
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // Lấy lat long ở trung điểm
        level: 1 // Level zoom out map 
    };  

// Tạo map 
var map = new kakao.maps.Map(mapContainer, mapOption); 

// Tạo Object biến đổi map-lat long
var geocoder = new kakao.maps.services.Geocoder();

var marker = new kakao.maps.Marker(), // Marker hiển thị khi click 
    infowindow = new kakao.maps.InfoWindow({zindex:1}); // Info window dùng để hiện thị vị trí đang đc click 

// Search tọa độ trung điểm rồi show thông tin vị trí ở phía trên bên trái
searchAddrFromCoords(map.getCenter(), displayCenterInfo);

// Khi click trên map, tạo event để biểu thị thông tin address vị trí đc click 
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
    searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            var detailAddr = !!result[0].road_address ? '<div>도로명주소 : ' + result[0].road_address.address_name + '</div>' : '';
            detailAddr += '<div>Jibun Address : ' + result[0].address.address_name + '</div>';
            
            var content = '<div class="bAddr">' +
                            '<span class="title">법정동 주소정보</span>' + 
                            detailAddr + 
                        '</div>';

            // Biểu thị vị trí click marker 
            marker.setPosition(mouseEvent.latLng);
            marker.setMap(map);

            // Biểu thị thông tin chi tiết của vị trí được click trên Info window
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }   
    });
});

// Tạo event để biểu thị thông tin address mới khi vị trí trung điểm bị thay đổi hoặc chỉ số zoom out thay đổi
kakao.maps.event.addListener(map, 'idle', function() {
    searchAddrFromCoords(map.getCenter(), displayCenterInfo);
});

function searchAddrFromCoords(coords, callback) {
    // Request thông tin địa chỉ hành chính bằng Latlong  - DÙNG  TRONG TRUE VALUE
    geocoder.coord2RegionCode(coords.getLng(), coords.getLat(), callback);         
}

function searchDetailAddrFromCoords(coords, callback) {
    // Request thông tin địa chỉ pháp chính bằng Latlong ( không dùng trong True value )
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

// hàm số để biểu thị thông tin address ở vị trí trung điểm, show tại phía trên bên trái
function displayCenterInfo(result, status) {
    if (status === kakao.maps.services.Status.OK) {
        var infoDiv = document.getElementById('centerAddr');

        for(var i = 0; i < result.length; i++) {
            //  region_type value hành chính cần để là 'H'
            if (result[i].region_type === 'H') {
                infoDiv.innerHTML = result[i].address_name;
                break;
            }
        }
    }    
}

HTML + JS code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>좌표로 주소를 얻어내기</title>
    <style>
    .map_wrap {position:relative;width:100%;height:350px;}
    .title {font-weight:bold;display:block;}
    .hAddr {position:absolute;left:10px;top:10px;border-radius: 2px;background:#fff;background:rgba(255,255,255,0.8);z-index:1;padding:5px;}
    #centerAddr {display:block;margin-top:2px;font-weight: normal;}
    .bAddr {padding:5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
</style>
</head>
<body>
<div class="map_wrap">
    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
    <div class="hAddr">
        <span class="title"> Địa chỉ hành chính tại vị trí trung điểm</span>
        <span id="centerAddr"></span>
    </div>
</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // div biểu thị map  
    mapOption = {
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // Lấy lat long ở trung điểm
        level: 1 // Level zoom out map 
    };  

// Tạo map    
var map = new kakao.maps.Map(mapContainer, mapOption); 

// Tạo Object biến đổi map-lat long
var geocoder = new kakao.maps.services.Geocoder();

var marker = new kakao.maps.Marker(), // Marker hiển thị khi click 
    infowindow = new kakao.maps.InfoWindow({zindex:1}); // Info window dùng để hiện thị vị trí đang đc click

// Search tọa độ trung điểm rồi show thông tin vị trí ở phía trên bên trái
searchAddrFromCoords(map.getCenter(), displayCenterInfo);

// Khi click trên map, tạo event để biểu thị thông tin address vị trí đc click
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
    searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            var detailAddr = !!result[0].road_address ? '<div>도로명주소 : ' + result[0].road_address.address_name + '</div>' : '';
            detailAddr += '<div>지번 주소 : ' + result[0].address.address_name + '</div>';
            
            var content = '<div class="bAddr">' +
                            '<span class="title">법정동 주소정보</span>' + 
                            detailAddr + 
                        '</div>';

            // Biểu thị vị trí click marker  
            marker.setPosition(mouseEvent.latLng);
            marker.setMap(map);

            // Biểu thị thông tin chi tiết của vị trí được click trên Info window
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }   
    });
});

// Tạo event để biểu thị thông tin address mới khi vị trí trung điểm bị thay đổi hoặc chỉ số zoom out thay đổi
kakao.maps.event.addListener(map, 'idle', function() {
    searchAddrFromCoords(map.getCenter(), displayCenterInfo);
});

function searchAddrFromCoords(coords, callback) {
    // Request thông tin địa chỉ hành chính bằng Latlong  - vd: 서울시 동대문구 전농동
    geocoder.coord2RegionCode(coords.getLng(), coords.getLat(), callback);         
}

function searchDetailAddrFromCoords(coords, callback) {
    // Request thông tin địa chỉ pháp chính bằng Latlong - vd: 서울시 동대문구 전농2동
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

// hàm số để biểu thị thông tin address ở vị trí trung điểm, show tại phía trên bên trái
function displayCenterInfo(result, status) {
    if (status === kakao.maps.services.Status.OK) {
        var infoDiv = document.getElementById('centerAddr');

        for(var i = 0; i < result.length; i++) {
            // egion_type value hành chính cần để là 'H'
            if (result[i].region_type === 'H') {
                infoDiv.innerHTML = result[i].address_name;
                break;
            }
        }
    }    
}
</script>
</body>
</html>

Link gốc