카카오맵에서 좌표값 가져오기 중에 질문드립니다.

gm막걸리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-10-17 (월) 22:34:18 2,348

안녕하세요 여러번 질문 드려 문제 해결해가고 있는 초보입니다.

전에 질문 했던것들은 아이디 (배르만 세진컴퓨터랜드 블랙캣77 볼피드) 님들의 답변으로 해결했습니다.

염치없지만 한번 더 질문 드리겠습니다.

Copy

<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=api키값"></script>

<script>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div

    mapOption = {

        center: new kakao.maps.LatLng(35.750701, 127.570667), // 지도의 중심좌표

        level: 14 // 지도의 확대 레벨

    };

 

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

 

// 지도에 클릭 이벤트를 등록합니다

// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다

kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        

   

    // 클릭한 위도, 경도 정보를 가져옵니다

    var latlng = mouseEvent.latLng;

    var lat= latlng.getLat();

    var lng= latlng.getLng();

   

    $('#getX').val(lat);

    $('#getY').val(lng);

});

</script>

 

<form id="fromId"  method="post" action="./index.php">

    <!-- hidden -->

      <input type="hidden"id="getX" name="getX" value="">

      <input type="hidden"id="getY" name="getY" value="">

      <input type="submit" value="전송">

</form>

<form id="from"  method="post" action="./test.php">

 

<?

$getX =  $_POST['getX'];

$getX =  $_POST['getY'];

 

echo $_POST['getY'];

echo "<br>";

echo $_POST['getX'];

?>

현재 이런식으로 스크립트에서 php로 좌표 가져오는중인데

폼에서 서밋이나 버튼으로 하면 클릭해야 가져오는 방식입니다.

질문1. 서밋이나 버튼을 클릭하지않고 자동으로 나오게 할수 있는 방법이 있을까요?

있다면 상세히 좀 부탁드리겠습니다.

질문2. 아작스라는 방법이 있다는데 여러번 찾아봤지만 실패해서 폼형식으로 했습니다.

아작스 방법 좀 상세히 부탁드립니다.

염치없지만 주석처리해주시면서 설명해주시면 감사하겠습니다.

그리고 위에 말씀드렸던 아이디 (배르만 세진컴퓨터랜드 블랙캣77 볼피드)님들 덕분에

공부에 재미가 생겼습니다 감사합니다.

그누보드5 카카오맵

답변 2개 / 댓글 6개

채택된 답변

+20 포인트

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-10-17 (월) 23:20:57

jQuery.ajax 는

https://api.jquery.com/jquery.ajax/

참조하시면 되고

페이지 하나에 이소스만 구성해서 해보시고

웹브라우저 개발자도구 콘솔 열고 확인해보세요.

이해하시면 쉽게 해결하실수 있으리라 생각됩니다.

Copy

<?php
$getX = isset($_POST['getX']) ? $_POST['getX'] : '';
$getY = isset($_POST['getY']) ? $_POST['getY'] : '';

if (empty($getX) === false && empty($getY) === false) {
    $arr = ['getX' => $getX, 'getY' => $getY];
    echo json_encode($arr);
} else {
?>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
    $(document).click(function (evt) {
        var x = evt.clientX;
        var y = evt.clientY;
        $.ajax({
            url: '<?php echo $_SERVER['PHP_SELF']; ?>',
            method: 'POST',
            data: {getX: x, getY: y},
        }).done(function (msg) {
            console.log(msg);
        }).fail(function (jqXHR, textStatus) {
            console.log( "Request failed: " + textStatus );
        });
    });
});
</script>

<?php
}
?>