반응형
내 애플리케이션 등록하기
kakao developers에 내 애플리케이션 등록하기
- https://developers.kakao.com/console/app
- 내 애플리케이션 추가하기 클릭
- 앱 이름, 사업자명, 카테고리 입력 후 저장 클릭
플랫폼 추가하기
- https://developers.kakao.com/console/app
- 위 과정에서 추가한 애플리케이션 클릭
- 플랫폼 항목의 플랫폼 설정하기 클릭
- 해당 예제에서는 웹으로 지도를 띄울 것이기 때문에 Web 플랫폼 등록 클릭
- 사이트 도메인 입력 후 저장
- ex) http://localhost
지도 띄우기
./index.html
- 아래의 APP_KEY값은 위에서 추가한 애플리케이션의 JavaScript 키로 변경하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}"></script>
<script>
var container = document.getElementById('map');
var position = new kakao.maps.LatLng(33.450701, 126.570667);
var options = {
center: position,
level: 3
};
var map = new kakao.maps.Map(container, options);
const marker = new kakao.maps.Marker({position});
marker.setMap(map);
</script>
</body>
</html>./docker-compose.yml
version: "3.3"
services:
nginx:
container_name: map-demo
image: nginx:1.17.9
environment:
TZ: "Asia/Seoul"
ports:
- "80:80"
volumes:
- ./index.html:/usr/share/nginx/html/index.html실행
docker-compose up -d접속
주소 검색 팝업 띄우기
./index.html
<button onclick="openSearchAddress()">주소 검색</button>
<!-- libraries=services 추가 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP_KEY}&libraries=services"></script>
<script type="text/javascript" src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function openSearchAddress() {
new daum.Postcode({
oncomplete: function (data) {
const address = data.address;
const geocoder = new kakao.maps.services.Geocoder();
// geocoder를 통해 해당 주소의 좌표 알아내기
geocoder.addressSearch(address, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
const addressList = result.map((it) => ({
address: it.road_address.address_name,
buildingName: it.road_address.building_name,
centerX: it.road_address.x,
centerY: it.road_address.y,
}));
const address = addressList[0];
alert(JSON.stringify(address));
}
});
}
}).open({
q: "판교역",
});
}
</script>참고
반응형
'Development > ETC' 카테고리의 다른 글
| [Kakao] 웹에서 카카오내비 앱 띄우기 (3) | 2024.03.18 |
|---|---|
| [Naver] 웹으로 네이버 지도 연동하기 (0) | 2023.12.01 |
| [HTTP] Transfer-Encoding (0) | 2023.05.09 |
| [Gradle] Multi-Project (0) | 2021.05.22 |
| [PostgreSQL] 설치 (0) | 2021.05.16 |