다음 지도 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/기타

번호 제목 글쓴이 날짜 조회수
6 Datepicker + 년월만 선택하기 관리자 06-06 5,659
5 JCROP을 이용한 이미지 자르기 관리자 05-18 836
4 jquery-file-upload 관리자 05-18 1,360
3 [스크립트] printjs 관리자 12-09 959
2 [스크립트] eventSwipe. HTML에서 swipe 이벤트를 사용할 수 있도록 해줍니다. 관리자 11-01 1,087
1 [QR] 구글 API로 QR 코드 생성 / Wi-fi 접속 QR 코드 생성 관리자 10-21 3,669