지도 좌표질문입니다
본문
g5-food 게시판을 사용하는데 지도가 주소지를 안 알려주고 항상 서울에 고정되어 있답니가
어떻게 하면 돌아갈련지요 좌표가 고정으로 되어 있는가요 고수님의 답변을 기다리겠읍니다.
키번호도 다있어요
답변 13
카카오 맵에서 `TypeError: Cannot read properties of undefined (reading 'Geocoder')` 오류가 발생한 경우, 이는 일반적으로 `Geocoder` 객체가 제대로 정의되거나 초기화되지 않았음을 나타냅니다.
이 오류의 한 가지 가능한 원인은 지도 서비스의 스크립트가 제대로 로드되지 않았거나 전혀 로드되지 않은 경우입니다. 예를 들어, 카카오 맵을 사용하는 경우 HTML 파일에 카카오 맵의 스크립트를 포함하고 `Geocoder` 객체를 사용하기 전에 로드되었는지 확인해야 합니다.
이 오류의 또 다른 가능한 원인은 `Geocoder` 객체가 제대로 초기화되기 전에 접근되는 경우입니다. 예를 들어, 카카오 맵을 사용하는 경우 `Geocoder` 객체를 사용하기 전에 초기화되었는지 확인해야 합니다.
카카오 데브톡에서 비슷한 문제를 겪은 사람들이 있습니다. 한 사람은 라이브러리를 요청하는 URL이 처음 카카오 맵을 요청하는 URL과 중복되면서 `Geocoder` 객체를 인식하지 못했다고 합니다. 맵을 요청하는 URL을 지워주니 잘 인식했다고 합니다¹. 다른 사람은 서비스 라이브러리 파라미터를 추가한 스크립트 한 줄만 사용하니 해결되었다고 합니다².
이 정보가 문제 해결에 도움이 되길 바랍니다. 상황에 대한 자세한 정보를 제공하시면 더 구체적인 조언을 드릴 수 있습니다. ?
(1) Geocoder 사용 중 자꾸 정의되지 않았다는 에러가 발생합니다 .... https://devtalk.kakao.com/t/geocoder/103635.
(2) kakao.maps.services.Geocoder() 호출시 에러문의입니다. https://devtalk.kakao.com/t/kakao-maps-services-geocoder/99681.
(3) React Kakao Maps 구현시 Cannot read property ‘Geocoder’ of undefined 오류. https://devtalk.kakao.com/t/react-kakao-maps-cannot-read-property-geocoder-of-undefined/115215.
(4) undefined. http://dapi.kakao.com/v2/maps/sdk.js?appkey=.
(5) undefined. https://dapi.kakao.com/v2/maps/sdk.js?appkey=*******&libraries=LIBRARY.
(6) undefined. https://dapi.kakao.com/v2/maps/sdk.js?appkey=*******&libraries=services,clusterer,drawing.
(7) undefined. https://dapi.kakao.com/v2/maps/sdk.js?appkey=*******&libraries=services.
다음과 같이 해볼 수 있을 것 같습니다.
write.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
//새글 작성일때 기본좌표
if($write['wr_5'] == null){$write['wr_5'] = 37.2540303019122;}
if($write['wr_6'] == null){$write['wr_6'] = 127.029761590557;}
$g5['title'] = $group['gr_subject'];
?>
이하생략~
<tr>
<th>주 소</th>
<td colspan="3">
<input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" class="wm_input frm_address required" placeholder="주소검색" style="width:70%;" required readonly>
<a href="javascript:void(0);" class="ser_bbt" id="ser_bbt"><i class="fa fa-search" aria-hidden="true"></i></a>
<div style="width:50%; margin-top:5px;">
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" class="wm_input frm_address" placeholder="나머지주소">
</div>
</td>
</tr>
<!-- API { -->
<tr>
<td colspan="4" class="cont_td">
<div style="background-color:#f9f9f9; width:100%; margin-top:5px; height:200px; border-radius:4px;" id="map"></div>
<input type="hidden" name="wr_5" value="<?php echo $write['wr_5']; ?>" id="wr_5" class="frm_input winp" readonly>
<input type="hidden" name="wr_6" value="<?php echo $write['wr_6']; ?>" id="wr_6" class="frm_input winp" readonly>
<div id="clickLatlng"></div>
<!--<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
<!-- } -->
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(<?php echo $write['wr_5']?>, <?php echo $write['wr_6']?>), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체 생성
var geocoder = new daum.maps.services.Geocoder();
// 마커
var marker = new daum.maps.Marker({
map: map,
// 지도 중심좌표에 마커를 생성
position: map.getCenter()
});
// 주소검색 API (주소 > 좌표변환처리)
$(function() {
$("#wr_3").on("click", function() {
new daum.Postcode({
oncomplete: function(data) {
//console.log(data);
$("#wr_3").val(data.address);
//$("#road").val(data.roadAddress);
//$("#sido").val(data.sido);
//$("#gugun").val(data.sigungu);
//$("#dong").val(data.bname);
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
//첫번째 결과의 값을 활용
var result = results[0];
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 좌표값을 넣어준다.
document.getElementById('wr_5').value = coords.getLat();
document.getElementById('wr_6').value = coords.getLng();
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords);
}
});
}
}).open();
});
$("#ser_bbt").on("click", function() {
new daum.Postcode({
oncomplete: function(data) {
//console.log(data);
$("#wr_3").val(data.address);
//$("#road").val(data.roadAddress);
//$("#sido").val(data.sido);
//$("#gugun").val(data.sigungu);
//$("#dong").val(data.bname);
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
//첫번째 결과의 값을 활용
var result = results[0];
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 좌표값을 넣어준다.
document.getElementById('wr_5').value = coords.getLat();
document.getElementById('wr_6').value = coords.getLng();
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords);
}
});
}
}).open();
});
});
//마커를 기준으로 가운데 정렬이 될 수 있도록 추가
var markerPosition = marker.getPosition();
map.relayout();
map.setCenter(markerPosition);
</script>
</td>
</tr>
<!-- } API -->
//이하생략~
1. 상단에 초기 좌표값 설정합니다. (초기값은 원하시는 지역으로 설정 하세요)
if($write['wr_5'] == null){$write['wr_5'] = 37.2540303019122;} //lat 초기좌표값 설정
if($write['wr_6'] == null){$write['wr_6'] = 127.029761590557;} // lng 초기좌표값 설정
2. 카카오맵 API Key 해당게시판 여분필드 1 에 발급받은 javascript 키 등록
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
view.skin.php
<!-- API { -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
<style>
/* 말풍선 형식의 인포윈도우 스타일 */
.custom-infowindow {position: relative;padding: 10px;background-color: #ffffff;border: 1px solid #dddddd;border-radius: 5px;font-size: 14px;
color: #333333;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
.custom-infowindow::before {content: '';position: absolute;top: 100%;left: 51%;margin-left: -10px;border-width: 10px;border-style: solid;
border-color: #ffffff transparent transparent transparent;z-index: 1;}
</style>
<script>
var mapContainer = document.getElementById('map'); // 지도를 표시할 div
var mapOption = {
center: new daum.maps.LatLng(<?php echo $view['wr_5']?>, <?php echo $view['wr_6']?>), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 마커
var markerPosition = new daum.maps.LatLng(<?php echo $view['wr_5']?>, <?php echo $view['wr_6']?>);
var marker = new daum.maps.Marker({
position: markerPosition,
map: map
});
// 커스텀 인포윈도우를 생성합니다
var infowindow = new daum.maps.CustomOverlay({
position: markerPosition,
content: '<div class="custom-infowindow"><?php echo cut_str(get_text($view['wr_subject']), 70); ?></div>',
yAnchor: 2 // 인포윈도우의 Y축 위치를 조정합니다 (1: 마커 위에 표시, 0: 마커 아래에 표시)
});
// 인포윈도우를 지도에 표시합니다
infowindow.setMap(map);
// 로드뷰 추가
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄웁니다
roadviewClient.getNearestPanoId(markerPosition, 50, function(panoId) {
roadview.setPanoId(panoId, markerPosition); // panoId와 중심좌표를 통해 로드뷰 실행
});
</script>
<!-- } API -->
// 하단의 스크립트 이전에 위의 api 스크립트 수정 및 추가
<script>
<?php if ($board['bo_download_point'] < 0) { ?>
$(function() {
이하생략~
감사합니다 싱경 쓰시느라 수고 많았습니다.저는 완전초보라 겨우 순서대로 홈페이지만 만들었지 아무것도 모르는 초보입니다 수고많이 하셨읍니다
초보라 포기하겠읍니다. 감사합니다
감사합니다 싱경 쓰시느라 수고 많았습니다.저는 완전초보라 겨우 순서대로 홈페이지만 만들었지 아무것도 모르는 초보입니다 수고많이 하셨읍니다
초보라 포기하겠읍니다. 감사합니다
