안녕하세요 카카오 map api를 통해서 인터랙티브 페이지 개발중인 개발자입니다.
현재 인터랙티브 페이지는 원페이지로 진행하고 있습니다.
그러다 보니 지도가 나오는 부분을 부득이하게 div로 감싸고 display none을 진행하였는데
해당 이미지처럼 지도가 꺠져서 나옵니다.
<div id="map"/> <- 이렇게만 진행하면 아무 이상없이 지도가 잘 나타나는데
제가 원하는 방식대로
<div id="mapDIv" style="display : none;">
<div id="map"/>
</div>
진행하면 위에 이미지처럼 지도가 깨져서 나옵니다.
이부분은 어떤방식으로 해결해야되는지 알고 싶습니다.
추가적으로
스크립트상에 mapContainer를 전역변수로 지정하면 저렇게 꺠져서 나오고
click이벤트를 통해 지도(mapContainer, 지역변수)를 생성하면서 display를 block처리하면 지도가 안꺠져나옵니다.
-> 하지만 이방법으로 되긴 하는데 확대축소 버튼을 도입을 하려면 전역변수로 진행해야될꺼 같습니다.
혹시 몰라 제 소스를 올려드리겠습니다.
밑에 소스는 click 이벤트(지역변수) 로 진행할 시 지도가 생성되도록 구현한 소스입니다.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services"></script>
<script>
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
var res = originalVal.apply(this, arguments);
if (this.is('input:text') == arguments.length >= 1) {
// this is input type=text setter
this.trigger("input");
}
return res;
};
})(jQuery);
var $input = $(".postcodify_address"); //
$(".postcodify_address").on('input', function() {
roadApiClick($(this).val());
});
function roadApiClick(v){
$("#mapDiv").css("display","block");
$('html, body').animate({ scrollTop: $("#mapDiv").offset().top - 60}, 500, 'linear');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
draggable: false,
disableDoubleClick : true,
disableDoubleClickZoom : true,
level: 6 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(v, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
// 지도의 현재 영역을 얻어옵니다
var bounds = map.getBounds();
// 영역의 남서쪽 좌표를 얻어옵니다
var swLatLng = bounds.getSouthWest();
// 영역의 북동쪽 좌표를 얻어옵니다
var neLatLng = bounds.getNorthEast();
$.ajax({
type: 'get',
url: "/content/ajaxSchoolMaker",
dataType: "json",
data: {
latitude1 : swLatLng.getLat(),
latitude2 : neLatLng.getLat(),
hardness1 : swLatLng.getLng(),
hardness2 : neLatLng.getLng()
},
success: function(data) {
var position = [];
$.each(data, function(key, value) {
var arry = {
title : value.facility_type,
latlng : new kakao.maps.LatLng(value.latitude, value.hardness)
};
position.push(arry);
});
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
$.each(position, function(key, value) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: value.latlng, // 마커를 표시할 위치
title : value.title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
});
}
});
}
});
}
//////이부분을 추가해야되서 전역변수로 진행하여야되는데 못하고있습니다..ㅠㅠ
// 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomIn() {
map.setLevel(map.getLevel() - 1);
}
// 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
function zoomOut() {
map.setLevel(map.getLevel() + 1);
}
</script>
확인 부탁드리겠습니다.