글작성시 게시판에 다음주소검색을 이용하여 상세페이지에는 해당 입력된 주소를 카카오(다음)지도로 나타내는 것을 구현해보겠습니다.

4acc2f03f2e812f6545e1ab3a574942a_1514334781_2507.png
글작성시 다음주소검색을 이용하여 주소를 입력하면

다음과 같이 게시판의 상세페이지에 글작성시 주소에 입력된 주소가 카카오(다음)지도로 나타나겠습니다.

4acc2f03f2e812f6545e1ab3a574942a_1514334847_0218.png 



해당스킨경로의 write.skin.php 파일의 최상단에 아래의 소스를 추가합니다.

<?php

/* 해당스킨경로/write.skin.php */


add_javascript(G5_POSTCODE_JS, 0); //다음 주소 js

// 주소입력

$wr1 = explode('|',$write['wr_1']);

$ex_zip  = $wr1[0];

$ex_addr1  = $wr1[1];

$ex_addr2  = $wr1[2];

$ex_addr3  = $wr1[3];

$ex_jibeon  = $wr1[4];

?>


그리고 중간쯤에 제목과 내용이 있는 부분 중 원하는 위치에 다음우편번호 소스를 추가합니다.

/* 해당스킨경로/write.skin.php */


<tr>

<th scope="row"><label for="wr_1">주소</label></th>

<td>

<label for="ex_zip" class="sound_only">우편번호</label>

<input type="text" name="ex_zip" value="<?php echo $ex_zip; ?>" id="ex_zip"  class="frm_input" size="6" maxlength="6">

<button type="button" class="btn_frmline" onclick="win_zip('fwrite', 'ex_zip', 'ex_addr1', 'ex_addr2', 'ex_addr3', 'ex_jibeon');">주소 검색</button><br>

<input type="text" name="ex_addr1" value="<?php echo $ex_addr1; ?>" id="ex_addr1" class="frm_input frm_address" size="50">

<label for="ex_addr1">기본주소</label><br>

<input type="text" name="ex_addr2" value="<?php echo $ex_addr2; ?>" id="ex_addr2" class="frm_input frm_address" size="50">

<label for="ex_addr2">상세주소</label>

<br>

<input type="text" name="ex_addr3" value="<?php echo $ex_addr3; ?>" id="ex_addr3" class="frm_input frm_address" size="50" readonly="readonly">

<label for="ex_addr3">참고항목</label>

<input type="hidden" name="ex_jibeon" value="<?php echo $ex_jibeon; ?>">

</td>

</tr>


해당스킨경로에 write_update.skin.php 파일을 생성하고 아래의 소스를 추가합니다.

<?php

/* 해당스킨경로/write_update.skin.php */


if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가


function kakao_request($path, $query, $content_type = 'json', $api_key)

{

$api_server = 'https://dapi.kakao.com';

$headers = array('Authorization: KakaoAK '.$api_key.'');

$opts = array(

CURLOPT_URL => $api_server . $path . '.' . $content_type . '?' . $query,

CURLOPT_RETURNTRANSFER => true,

CURLOPT_SSL_VERIFYPEER => false,

CURLOPT_SSLVERSION => 1,

CURLOPT_HEADER => false,

CURLOPT_HTTPHEADER => $headers

);


$curl_session = curl_init();

curl_setopt_array($curl_session, $opts);

$return_data = curl_exec($curl_session);


if (curl_errno($curl_session)) {

throw new Exception(curl_error($curl_session));

} else {

//print_r(curl_getinfo($curl_session));

curl_close($curl_session);

return json_decode($return_data, true);

}

}


$path = '/v2/local/search/address';

$content_type = 'json'; // json or xml

$params = http_build_query(array(

'page' => 1,

'size' => 10,

'query' => $ex_addr1

));

$api_key = 'bb0d01bee89e91a1aca586e8a6428305';

$res = kakao_request($path, $params, $content_type, $api_key);

$wr_longitude = $res['documents'][0]['x'];

$wr_latitude = $res['documents'][0]['y'];



// 주소

$wr_1 = "$ex_zip|$ex_addr1|$ex_addr2|$ex_addr3|$ex_jibeon";

$sql = " update {$write_table} set wr_1 = '{$wr_1}', wr_longitude = '{$wr_longitude}', wr_latitude = '{$wr_latitude}' where wr_id = '{$wr_id}' ";

sql_query($sql);

?>


이제 해당스킨경로의 view.skin.php 파일의 상단에 아래의 소스를 추가합니다.

<?php

/* 해당스킨경로/write.skin.php */


// 주소

$wr1 = explode('|',$view['wr_1']);

$ex_zip  = '('.$wr1[0].')';

$ex_addr1  = $wr1[1];

$ex_addr2  = $wr1[2];

$ex_addr3  = $wr1[3];

$ex_jibeon  = $wr1[4];

?>


지도가 나타나기 원하는 위치에 아래의 소스를 추가합니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=bb0d01bee89e91a1aca586e8a6428305&libraries=services,clusterer,drawing"></script>

<script>

    $(function () {

        var geocoder = new daum.maps.services.Geocoder();

        var container = document.getElementById('map');

        var map;


        showMap('<?php echo $view['wr_latitude'];?>', '<?php echo $view['wr_longitude'];?>');


        function showMap(latitude,longitude)

        {

            var coords = new daum.maps.LatLng(latitude, longitude);

            var options = {

                center: coords,

                level: 3

            };


            map = new daum.maps.Map(container, options);


            var marker = new daum.maps.Marker({

                map: map,

                position: coords

            });


            var infowindow = new daum.maps.InfoWindow({

                content: '<div style="width:220px;text-align:center;padding:6px 0;"><?php echo "{$ex_addr1} {$ex_addr2} <br> {$ex_addr3}";?></div>'

            });

            infowindow.open(map, marker);

        }

    })

</script>


<div id="map" style="width:500px;height:400px;"></div>

추천 0 비추천 0
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 밴드 보내기
  • 블로그 보내기
  • 폴라 보내기
  • 카카오스토리 보내기
  • 텔레그램 보내기
  • 텀블러 보내기
댓글 0

게시판

RSS
번호 제목 글쓴이 날짜 추천 비추천
상단으로