글쓰기창에서
주소검색 후 입력란에 들어오는것 까지는 되는데요 지도에 출력하질 못하네요
고수님들 조언좀 부탁 합니다."감사합니다"
//주소검색해서 상세주소 넣는 부분 입니다.
< div class="bo_w_info write_div">
< label for="wr_1" class="sound_only">상세주소</label><button id="postcodify_search_button">주소검색클릭</button><br />
< input type="text" name="wr_1" value="<?=$write['wr_1']?>" id="wr_1" class="frm_input full_input postcodify_jibeon_address postcodify_details" size="50" maxlength="255" placeholder="상세주소">
< /div>
//팝업검색창을 띄워서 검색 후 주소가 출력되고 클릭하면 입력됩니다.
< !-- jQuery와 Postcodify를 로딩한다 -->
< script src="//ajax.kakaomapsapis.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>
< 카카오지도 전체 스크립트 입니다.>
< div id="map" style="width:100%;height:500px;"></div>
< script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=25e4c6b0c1db6f754627f6cf8562a00d&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', 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
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
< !-- 로드뷰를 표시할 div 입니다 -->
< div id="roadview" style="width:100%;height:500px;"></div>
< script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
</script>
답변 3개 / 댓글 1개
글쓰기 페이지에서 굳이 지도가 출력 되어야 하나요?
출력하려면 위처럼 주소를 입력한 후 클릭하면 지도가 나오는 방법을 써야겠죠
<button id="view_button">지도보기</button> 추가
카카오지도 전체 스크립트 입니다 아래
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
--> 수정
$('#view_button').on("click", function(){
var address = $('#wr_1').val();
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
~~
// 주소로 좌표를 검색합니다
geocoder.addressSearch(address, function(result, status) { // <---- 기존 주소대신 입력한 주소로
~
map.setCenter(coords);
//<---------- 로드뷰 스크립트 이동 ---->
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
roadviewClient.getNearestPanoId(coords, 50, function(panoId) {
roadview.setPanoId(panoId, coords); //panoId와 중심좌표를 통해 로드뷰 실행
});
}
});
});
답변에 대한 댓글 1개
요거 보시면 도움이 될지도 모르겠네요.
이런건 아마 위도,경도를 제대로 못불러서 그러는것 같은데 url로 공유해주시면 봐드리겠습니다
쪽지주세요
답변을 작성하려면 로그인이 필요합니다.
글쓰면서 주소내용이 바로 적용되는지 보려고 했던건데요 필요 없을거 같아요^^
그래서 지금은 스크립트를 뷰페이지에만 넣었어요 ㅎㅎ
안되네요 "어렵네요 ㅠㅠ