질문/조언질답게시판

카카오 지도 게시판( https://xetown.com/point_contents/1373126  )을 수정 해보려고 시도 중입니다.

 

샘플페이지 ( https://eond.com/eb_georo2  )를 보시면 현재는 글쓰기 화면에서 확장변수 주소값에 주소를 입력하고 글 저장을 하면 목록 화면의 리스트 상단에 지도와 작성한 게시글의 내용이 해당 지점에 표시가 됩니다.

 

저는 글쓰기 화면에서 현재와 같은, 직접 주소 입력 외에 표시되는 지도에서 이용자가 특정 지점을 클릭하고 글을 작성 저장해도 현재와 같이 글목록 상단 지도에 표시가 되게끔 하려고 합니다.

 

글쓰기 화면의 소스를 아래와 같이 지도가 표시되고 특정지점 클릭 시 위도와 경도가 표시되는것 까지는 카카오 개발자 가이드 문서에서 샘플을 가져와서 구현이 되었습니다.

 

표시되는 위도와 경도값이 글 저장 후 목록 페이지의 지도에 표시가 되게끔 두 값을 목록 페이지 지도 부분으로 넘겨주고 싶은데 이 부분에 대해 대략적인 힌트라도 도움을 받도 싶습니다.

 

 

게시판 쓰기화면 지도 위 클릭 시 현재 좌표 표시 소스 추가

<div id="map" style="width:100%;height:350px;"></div>
<p><em>지도를 클릭해주세요!</em></p> 
<div id="clickLatlng"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={$mi->kakao_key}&libraries=services,clusterer"></script>

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다


// HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
if (navigator.geolocation) {
    
    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
    navigator.geolocation.getCurrentPosition(function(position) {
        
        var lat = position.coords.latitude, // 위도
               lon = position.coords.longitude; // 경도
        
        var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
        
        // 마커와 인포윈도우를 표시합니다
        displayMarker(locPosition, message);
            
      });
    
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
    
    var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
        message = 'geolocation을 사용할수 없어요..'
        
    displayMarker(locPosition, message);
}

// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({  
        map: map, 
        position: locPosition
    }); 
    
    var iwContent = message, // 인포윈도우에 표시할 내용
        iwRemoveable = true;

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        content : iwContent,
        removable : iwRemoveable
    });
    
    // 인포윈도우를 마커위에 표시합니다 
    infowindow.open(map, marker);
    
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);      
}    





// 지도를 클릭한 위치에 표출할 마커입니다
var marker = new kakao.maps.Marker({ 
    // 지도 중심좌표에 마커를 생성합니다 
    position: map.getCenter() 
}); 
// 지도에 마커를 표시합니다
marker.setMap(map);

// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        
    
    // 클릭한 위도, 경도 정보를 가져옵니다 
    var latlng = mouseEvent.latLng; 
    
    // 마커 위치를 클릭한 위치로 옮깁니다
    marker.setPosition(latlng);
    
    var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
    message += '경도는 ' + latlng.getLng() + ' 입니다';
    
    var resultDiv = document.getElementById('clickLatlng'); 
    resultDiv.innerHTML = message;
    
});



</script>

 

글쓰기 화면 : 확장변수 주소 입력난 의 기존 방식외에 위의 추가된 소스로 아래 지도가 표시되고 지도의 지점 클릭 시 위도와 경도값이 출력됩니다. 

2020-04-21 15,49,55.JPEG

현재는 확장변수 주소난에 입력된 주소값으로 게시판 목록 화면의 지도에 표시가 되지만 저는 주소값을 입력하거나 추가된 소스에 사용자가 직접 찍은 곳의 위도와 경도값을 게시판 목록 페이지 지도로 넘기고 싶습니다.

 

 

2.글목록 화면 상단 지도 관련 소스부분입니다.

현재는 글쓰기 화면의 확장변수 주소값에 입력된 주소 값으로 다음 지도에 표시가 됩니다.

저는  위 1번 글쓰기화면에서 지도상에서 직접 선택한 곳의 경도와 위도값을 가져와서도 지도에 표시를 해주려고 하는데요.

글쓰기 화면에서 표시되는 경도와 위도값을 이곳 게시판 목록의 지도 가져오는 방법에 대해 대략적으로라도 힌트를 좀 얻고 싶습니다.

<div id="map" style="width:100%;height:600px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={$mi->kakao_key}&libraries=services,clusterer"></script>
<script>
var listData = [
<[email protected]($document_list)-->
<[email protected]($document_list as $no => $document)-->
["{$document->getExtraEidValue('address')[1]}","{$document->getExtraEidValue('fish')}<br>by {$document->getNickName()}","?document_srl={$document->document_srl}"],
<[email protected]>
<[email protected]>
['','',''],
<[email protected]>
];

var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(35.95, 128.25),
level: 13
};

// 맵 표시
var map = new kakao.maps.Map(mapContainer, mapOption);
//교통정보표시
map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC); 

// // 마커 클러스터러를 생성합니다 
// var clusterer = new kakao.maps.MarkerClusterer({
//  map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
//  averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
//  minLevel: 10, // 클러스터 할 최소 지도 레벨
//  disableClickZoom: false // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
// });

// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {

// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {

lat = position.coords.latitude;    // 위도
lon = position.coords.longitude; // 경도

var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;width:220px;">'+ lat + ' / ' + lon +'</div>'; // 인포윈도우에 표시될 내용입니다

// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);



var idGap = document.getElementById("digit");
idGap.innerHTML = "위도 : "+ lat +" , 경도 : " + lon;
});

} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
console.log("ㅇㅇㅇ");
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'

displayMarker(locPosition, message);
}
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

// 주소 -> 좌표 변환 라이브러리
var geocoder = new daum.maps.services.Geocoder();


// foreach loop
listData.forEach(function(addr, index) {
geocoder.addressSearch(addr[0], function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 마커 이미지의 이미지 주소입니다
// var imageSrc = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var imageSrc = "{$tpl_path}/assets/img/ico-pin4.svg";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);


// 클러스터러 
// var markers = $(this).map(function(i, position) {
//  return new kakao.maps.Marker({
//  position: coords,
//  clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
//  image : markerImage // 마커 이미지
//
//  });
// });
// // 클러스터러에 마커들을 추가합니다
// clusterer.addMarkers(markers);
// var marker = new kakao.maps.Marker({
//  position: coords,
//  clickable: true,
//  image : markerImage // 마커 이미지
// });

var marker = new kakao.maps.Marker({
position: coords,
clickable: true,
image : markerImage
});

// 마커를 지도에 표시합니다.
marker.setMap(map);

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<a href="'+addr[2]+'"><div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div></a>',
removable : true // 마우스드래그(false), 닫기버튼노출(true)
});

// 마커에 클릭이벤트를 등록합니다
// kakao.maps.event.addListener(marker, 'click', function() {
//  // 마커 위에 인포윈도우를 표시합니다
//  // alert('클릭');
//  infowindow.open(map, marker);
// });
kakao.maps.event.addListener(marker, 'click', function(){
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
var position = this.getPosition();
//var url = 'https://map.kakao.com/link/map/'+position.getLat()+','+position.getLng();
// window.open(url, '_blank');
// var url = addr[2];
// location.href=url;


// var url = "{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle,'cpage','')}";
// location.href=url;
});

// // 마커클러스터러 클릭
// kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
//  infowindow.open(map, marker);
//  // 현재 지도 레벨에서 1레벨 확대한 레벨
//  var level = map.getLevel()-1;
//
//  // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
//  map.setLevel(level, {anchor: cluster.getCenter()});
// });


}


});

});

</script>

 

현재 게시판 목록 화면 ( 글쓰기 화면의 주소값을 가져와서 지도에 표시 )

2020-04-21 15,49,55.JPEG

 

 

*수정된 글쓰기화면의 write_form.html은 파일첨부하였습니다.

write_form.html

Atachment
첨부
  • profile

    좌표값을 따로 입력 받을 수 있도록 하시는게 좋을 것 같아보이네요

    http://xeant.com/latlng 여기서 주소값에 따른 좌표값 확인하고, 만약 그게 안 맞다면 조정 하게 되면 해당 좌표 돌려줍니다. 그 좌표값을 게시판에 저장하는 형식으로 하시면 될것 같네요 

  • profile ?

    답변 감사합니다.
    저의 경우는 이용자가 실제 주소값이 없는 장소(바다,강..)에 관한 정보를 쓰는, 좀 특이한 경우가 있을것 같아서 주소값이 있는곳은 현재 방식대로 하면 되는데 주소값이 없는곳이 문제라서요.,

    현재 글쓰기 화면에서 위도 경도값이 표시되는것 까진 되었는데 이 값을 특정한 곳에 저장해서 글목록 지도로 넘겨줘야 할것 같은데 이 부분에 대해서 힌트라도 좀 얻고 싶습니다.

  • ? profile
    글쓰기 폼에서, 좌표값을 자동으로 넣는 버튼 하나 생성하고, 좌표값은 확장변수에 저장하면 될것 같아보입니다. 그렇게 하면 주소값에 다른 값을 써도 관계 없을 것 같구요 어차피 마커는 좌표값을 기준으로 찍으니까요
  • profile ?

    답변 감사합니다.
    무식하게 소스보고 이리저리 끼워 맞추는 수준이라....^^; 말씀 해주신 "좌표값을 자동으로 넣는 버튼 하나 생성" 그리고 "좌표값은 확장변수에 저장"하는것에 대해 카카오 개발자포럼이나 가이드 자료를 한번 찾아보겠습니다.

    죄송하지만 혹시 아시는 곳 중에 참고 할만한 샘플페이지나 검색 해볼만한 키워드가 있을실까요?

     

  • ? profile
    geocoder 라고 주소값 던지면 좌표값 리턴해주는 api 참고해보세요
    좌표값 리턴해주는 소스 부분을 참고해서 만들어보세요 ^^
    안되면 그냥 맡기심이 나을것 같기도 하네요 ^^
  • profile ?

    네 한번 시도해보고 안되면 의뢰해야 할것 같아요

    답변감사드립니다.^^

  • ? profile
    네 화이팅입니다 ^^
    잘 안되면 쪽지 주세요
  • profile

    혹시 이런식의 기능이 말씀하시는 건가요?
    아래 링크는 제가 제작한 위젯인데... 지도를 클릭하면 좌표값을 필드에 가져옵니다.
    https://xenara.co.kr/index.php?mid=widget_documentmap_list

    게시판 형태는 아니지만... 유사할 것 같네요.
    좌표이벤트는 카카오지도API에서 제공을 해줍니다.
    daum.maps.event.addListener(kakaoMap, 'click', function(mouseEvent) {
    //
    });

  • profile ?

    답변감사합니다.

    현재 공개되는 소스는 글쓰기 화면에서 주소값을 입력하고 저장을 하면 글 목록 화면의 상단 지도에서 확장변수 주소값을 가져와서 지도에 표시를 해주게 됩니다

     

    저는 여기에 글쓰기화면에서 수정된 소스로 말씀 해 주신 좌표이벤트로 지도 특정지점 클릭 시 위도와 경도값이 메세지로 출력되는것 까지는 해결이 되었는데요.  이 값을 확장변수에 넣는 방법을 찾고 있습니다. 

     

    // 마커 위치를 클릭한 위치로 옮깁니다

        marker.setPosition(latlng);
         
        var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
        message += '경도는 ' + latlng.getLng() + ' 입니다';
         
        var resultDiv = document.getElementById('clickLatlng'); 
        resultDiv.innerHTML = message;

     

     

    111.JPEG

  • ? profile

    사용자정의를 한줄입력칸으로 2개 생성하시구요.
    문제는 해당 사용자저의 input[type=text] 의 ID나 CLASS를 알 수 없으니..
    이값을 알면 아래처럼 적용하시면 될건데...
    jQuery('ID or CLASS Selector').val('위도');
    jQuery('ID or CLASS Selector').val('경도');

    if문으로 해당 사용자정의이름(eid)를 체크해서 해당 위경도 eid일 경우, DIV를 추가하여 그 DIV에 ID나 CLASS
    값을 지정하여 jQuery 처리해보시는 것은 어떨까요?

  • profile ?
    주신 답변을 보니 개인적인 능력으로 해결은 안될 것 같고 의뢰를 통해 해결을 해야 할것같습니다.^^;
    답변 감사합니다.
  • ? profile

    이런식을 말씀하시는 것 같군요. 아래는 제가 제작한 업체소개 게시판 글쓰기 화면입니다.

    사용자정의를 이용했구요. 주소검색 하면 우선으로 해당주소로 지도가 이동하구요.

    지도를 클릭하면 사용자정의필드에 좌표가 추가 됩니다.

    참고하시구요. 즐거운 저녁시간 되세요~~

     

    제목 없음.png

  • profile ?

    네 제가 원하던 형식입니다.

    공개되는 소스에 주소입력방식은 구현되어 있고 추가로 지도 특정지점 클릭 시 좌표값을 확장변수에 저장해서 그 값을 게시판 목록 지도에 뿌려 주는 걸 해결하려고 하고 있었습니다.

  • profile
    제가 예전에 작업했던 스킨입니다. http://xeant.com/dians_demo 참고하실 수 있습니다.
    게시글 쓰기를 누르시면 오른쪽 하단의 좌표값 생성을 누르면 확장변수 주소값을 기준으로 좌표값을 자동으로 넣어줍니다. 만약 좌표가 맞지 않다면 http://xeant.com/latlng 에서 좌표값을 수정후, 좌표값을 입력할 수 있습니다.
  • profile ?
    네 참고 해보겠습니다.