카카오맵 로드뷰 질문 좀 드립니다. 채택완료
맨 아래 이미지처럼 위에는 일반지도 아래는 로드뷰인데요
일반지도는 주소변환하여 잘나오는데 로드뷰는 아무런 반응이 없어요ㅠ
<현재 뷰페이지 일반지도와 로드뷰 스크립트 입니다>"조언 좀 부탁드립니다"
<div>
<div id="map" style="width:100%;height:350px;"></div>
<div id="roadview" style="width:100%;height:350px;"></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: 5 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch("<?=$view['wr_1']?>",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 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>
</div>
답변 1개
로드뷰는 좌표 참조가 예제소스 그대로 인것 같습니다.
아래 소스를 참고해보세요
</p>
<p> <div></p>
<p> <div id="map" style="width:100%;height:350px;"></div></p>
<p> <div id="roadview" style="width:100%;height:350px;"></div></p>
<p> </div></p>
<p> <script type="text/javascript"</p>
<p> src="//dapi.kakao.com/v2/maps/sdk.js?appkey=25e4c6b0c1db6f754627f6cf8562a00d&libraries=services"></script></p>
<p> </p>
<p> <script></p>
<p> var mapContainer = document.getElementById('map'), // 지도를 표시할 div</p>
<p> mapOption = {</p>
<p> center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표</p>
<p> level: 5 // 지도의 확대 레벨</p>
<p> };</p>
<p> </p>
<p> // 지도를 생성합니다 </p>
<p> var map = new kakao.maps.Map(mapContainer, mapOption);</p>
<p> </p>
<p> var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div</p>
<p> var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체</p>
<p> var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체</p>
<p> </p>
<p> // 주소-좌표 변환 객체를 생성합니다</p>
<p> var geocoder = new kakao.maps.services.Geocoder();</p>
<p> // 주소로 좌표를 검색합니다</p>
<p> var geocoderCallback = function (result, status) {</p>
<p> var latX, latY;</p>
<p> // 정상적으로 검색이 완료됐으면</p>
<p> if (status === kakao.maps.services.Status.OK && 0 < result.length) {</p>
<p> </p>
<p> if (1 === result.length) {</p>
<p> latX = result[0].x;</p>
<p> latY = result[0].y;</p>
<p> } else {</p>
<p> console.log('1<', result); // 적절하게 예외처리</p>
<p> }</p>
<p> </p>
<p> console.log(mapOption);</p>
<p> var latlng = new kakao.maps.LatLng(latY, latX);</p>
<p> // 결과값으로 받은 위치를 마커로 표시합니다</p>
<p> var marker = new kakao.maps.Marker({</p>
<p> map: map,</p>
<p> position: latlng</p>
<p> });</p>
<p> </p>
<p> // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다</p>
<p> map.setCenter(latlng);</p>
<p> </p>
<p> var position = latlng;</p>
<p> </p>
<p> // 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.</p>
<p> roadviewClient.getNearestPanoId(position, 50, function (panoId) {</p>
<p> roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행</p>
<p> });</p>
<p> } else {</p>
<p> console.log('else', result)</p>
<p> }</p>
<p> }</p>
<p> geocoder.addressSearch("서울 종로구 세종로 1-68", geocoderCallback);</p>
<p> </script></p>
<p>답변에 대한 댓글 4개
https://semo.pw/kko/
1. 이렇게는 안되는데
geocoder.addressSearch("<?=$view['wr_1']?>",function(result, status) {
2. 요로케 하닌까 되네요 ㅎㅎ
geocoder.addressSearch("<?=$view['wr_1']?>", geocoderCallback);
1. 번으로는 왜 안되는거에요 궁굼하네요 제가 초보라 ㅎㅎ ?
오탈자를 확인해보시기 바랍니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인