다음지도 퍼오기 스크롤 문제
본문
홈페이지 오시는길에 카카오맵을 사용해서 지도를 보여주고있습니다. 근데 스크롤을 아래로 내릴때 지도부분위로가면 스크롤은 멈추고 지도가 확대 되어 버립니다. 아래 사이트보면 스크롤 내려도 지도랑 상관없이 바로 스크롤이 내려 가는데요. 방법좀 부탁드립니다. ㅠㅠ
http://www.abps.co.kr/htm/intro_guide.php
답변 1
퍼오기로 만든 스크립트로는 안되고, api를 통해서만 되는것 같네요. 일단 다음개발자에서 앱만드셔서 javascript key를 얻구요. 아래 소스에서 api 키 부분이랑 위도 경도만 바꾸시면됩니다. 예제사이트 소스보기하면 그대로 있네요.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키넣으세요&libraries=services"></script>
<div id="map"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerPosition = new kakao.maps.LatLng(37.505273, 127.023655); // 마커가 표시될 위치입니
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
function setZoomable(zoomable) {
// 마우스 휠로 지도 확대,축소 가능여부를 설정합니다
map.setZoomable(zoomable);
}
$(window).ready(function() {
setZoomable(false);
$('#map').on('click',function(){
setZoomable(true);
});
var mapTop = $('#map').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() < mapTop || $(window).scrollTop() > mapTop) {
setZoomable(false);
}
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
