다음 지도 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
최근 게시물
최근 댓글
- downloadWhenOpenInRe… +1
- https://widsign.com/… +1
- 게시물이 없습니다
- 게시물이 없습니다
- 게시물이 없습니다