다음 지도 api 주소을 좌표 구하고 여러개 마커 제어하기

php Curl 

 

$address = "세종특별자치시 한누리대로 2130";
$url = "https://dapi.kakao.com/v2/local/search/address.json?query=".urlencode($address);

$ch=curl_init();
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url); // url 연결
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, 
            array("Accept: application/json", "Content-Type: application/json", 
                  "Authorization: KakaoAK {API REST 키}"));
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = curl_exec($ch);
$result = (array) json_decode($response); 
 
//좌표구하기
if($result["documents"][0]->road_address->x){
    $lat = $result["documents"][0]->road_address->y;
    $lng = $result["documents"][0]->road_address->x;
}else{
    $lat = $result["documents"][0]->address->y;
    $lng = $result["documents"][0]->address->x;
}
curl_close($ch); // 종료
Copy

 

Html

 

<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(36.48005808069782, 127.28903907443583), // 지도의 중심좌표
        level: 13 // 지도의 확대 레벨
    };
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
var positions = [
    <?php
       db 주소 불러옴  주소 : 세종특별자치시 한누리대로 2130
$testaddr = "세종특별자치시 한누리대로 2130";
  for 문시 주소 을 불러와 변수 $testaddr 
$address = $testaddr;
$url = "https://dapi.kakao.com/v2/local/search/address.json?query=".urlencode($address);

$ch=curl_init();
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url); // url 연결
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, 
            array("Accept: application/json", "Content-Type: application/json", 
                  "Authorization: KakaoAK {API REST 키}"));
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = curl_exec($ch);
$result = (array) json_decode($response); 
 
//좌표구하기
if($result["documents"][0]->road_address->x){
    $lat = $result["documents"][0]->road_address->y;
    $lng = $result["documents"][0]->road_address->x;
}else{
    $lat = $result["documents"][0]->address->y;
    $lng = $result["documents"][0]->address->x;
}
curl_close($ch); // 종료
    ?>
    {
        content: '<div class="customoverlay1">오버레이</div>', 
        latlng: new kakao.maps.LatLng( <?php echo $lat; ?>, <?php echo $lng; ?>)
    },
    <?php } ?>
];

for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng // 마커의 위치
    });
    // 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });
    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker,infowindow));
    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}
/* 아래와 같이도 할 수 있습니다 */
/*
for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng // 마커의 위치
    });
    // 마커에 표시할 인포윈도우를 생성합니다 
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content // 인포윈도우에 표시할 내용
    });
    // 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
    // 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
    (function(marker, infowindow) {
        // 마커에 mouseover 이벤트를 등록하고 마우스 오버 시 인포윈도우를 표시합니다 
        kakao.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.open(map, marker);
        });
        // 마커에 mouseout 이벤트를 등록하고 마우스 아웃 시 인포윈도우를 닫습니다
        kakao.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
        });
    })(marker, infowindow);
}
*/
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>
 
Copy

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 27
45 web chart - 실시간 차트 관리자 07-25 109
44 비동기 프로그래밍 관리자 07-25 84
43 table thead 고정과 tbody 스크롤 관리자 07-23 116
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 176
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 370
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 511
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 564
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 403
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 524
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 475
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 238
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 557
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 270
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 302
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 298
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 591
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 683
28 div 2개 나란히 정렬하는 방법 관리자 09-09 452
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 331