[Kakao지도] 지도 배경 변경하기
- Web/JavaScript
- 2023. 1. 15.
지도 배경 변경하기
카카오지도 맵 타일 변경하기, 감추기
카카오 지도를 불러왔다. 그러나 여기서 중요한 것은 서울시에 대한 저 하얀색 부분이며, 그 외는 중요하지가 않다.
그래서 저 지도를 어떻게하면 좋을까 생각하다가 만들어진 방법이다.
첫 번째 방법, 오버레이 적용
카카오 지도에 오버레이 기능을 적용하여 만들었다.
지도 위에 커튼막을 세워서, 가려주는 기법이다.
보통 이런 가리는 용이 아니라서 그런지 지도의 확대, 축소 할 때마다 지도가 보이는 것을 알 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/layout/header.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>커스텀 타일셋2</title>
</head>
<body>
<div id="map" style="width:100%;height:850px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var dmap = new kakao.maps.Map(mapContainer, mapOption);
// Tileset을 생성하고 지도 오버레이로 추가합니다
kakao.maps.Tileset.add('TILE_NUMBER',
new kakao.maps.Tileset({
width: 256,
height: 256,
getTile: function(x, y, z) {
var div = document.createElement('div');
div.innerHTML = x + ', ' + y + ', ' + z;
div.style.fontSize = '36px';
div.style.fontWeight = 'bold';
div.style.lineHeight = '256px'
div.style.textAlign = 'center';
div.style.color = '#4D4D4D';
div.style.background = '#ff0';
div.style.border = '1px dashed #ff5050';
return div;
}
}));
// 지도 위에 TILE_NUMBER 오버레이 레이어를 추가합니다
dmap.addOverlayMapTypeId(kakao.maps.MapTypeId.TILE_NUMBER);
</script>
</body>
</html>해당 소스는 카카오지도 API SCRIPT만 제외하고 올린 소스이다.
오버레이 기능을 활용하고 싶다면 해당 소스를 이용하면 된다.
위 방법은 html의 div과 css방법을 사용해서 지도를 가리는 방법이다.
두 번째 방법, 카카오 맵 변경하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/layout/header.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>커스텀 타일셋1</title>
</head>
<body>
<img src="${pageContext.request.contextPath}/js/map/test.jpg">
<div id="map" style="width:100%;height:850px;"></div>
<script>
var domain = 'https://i1.daumcdn.net';
var path = '/dmaps/apis/openapi/sampleimg/';
var plan = function( x, y, z ) {
y = -y - 1;
var limit = Math.ceil( 3 / Math.pow( 2, z ) );
return "http://localhost:8090/MEARI/js/map/test.jpg";
/*
if ( 0 <= y && y < limit && 0 <= x && x < limit ) {
return domain + path + 'planh' +
z + '_' + y + '_' + x + '.png';
} else {
return 'https://i1.daumcdn.net/dmaps/apis/dark.png';
}
*/
};
kakao.maps.Tileset.add( 'PLAN',
new kakao.maps.Tileset(
512, 512, plan, '', false, 0, 2 ) );
var node = document.getElementById( 'map' );
var map = new kakao.maps.Map( node, {
projectionId: null,
mapTypeId: kakao.maps.MapTypeId.PLAN,
$scale: false,
center: new kakao.maps.Coords( 650, -550 ),
level: 2
} );
var center = map.getCenter();
var marker = new kakao.maps.Marker({
position: center
});
marker.setMap(map);
var infowindow = new kakao.maps.InfoWindow({
content: '커스텀 타일셋을 올릴수 있습니다!'
});
infowindow.open(map, marker);
</script>
</body>
</html>해당글은 사진을 통해서 가리는 방식이다.
각 좌표마다 자신의 프로젝트 경로의 사진을 불러와서 지도를 가리는 방법을 사용했다.
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] Object 만들기 (0) | 2023.06.01 |
|---|---|
| [JavaScript] replace 사용하기 (0) | 2023.01.23 |
| [kakao지도] 지도 중심좌표 부드럽게 이동하기 (0) | 2023.01.13 |
| [OpenLayer] 좌표계 변환하기 (0) | 2023.01.11 |
| [JavaScript] 현재 시간 가져오기 (0) | 2022.12.07 |