23. 9. 8.

길찾기 호출(위도,경도) Function (feat. 네이버,카카오,티맵)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>길안내버튼</title>
<script>
// 길찾기 function
function RoadMapFind(portal,lng,lat,name)
{
	if(portal==""){ alert("portal 값이 없습니다."); return false;}
	if(lng==""){ alert("lng 값이 없습니다."); return false;}
	if(lat==""){ alert("lat 값이 없습니다."); return false;}
	if(name==""){ alert("name 값이 없습니다."); return false;}
	
	var targetgul = "";
	const user = navigator.userAgent;
	if ( portal == "tmap" && !(user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1 )) {
		alert("T Map이 지원되지 않습니다.");
		return;
	}
	switch(portal)
	{
		case "naver": targetgul = "http://map.naver.com/index.nhn?elng="+lng+"&elat="+lat+"&etext="+encodeURI(name)+"&menu=route&pathType=1"; break;
		case "kakao": targetgul = "https://map.kakao.com/link/to/"+encodeURI(name)+","+lat+","+lng; break;
		case "tmap": targetgul = "https://api2.sktelecom.com/tmap/app/routes?appKey=250d4611-11bb-4089-b0f7-12ce7c1e14a8&name="+encodeURI(name)+"&lon="+lng+"&lat="+lat; break;
	}
	var MapFindWindow = window.open(targetgul,"MapFindWindow");
	MapFindWindow.focus();
}

// 창로드시
window.onload = function(){
    // btn1 클릭시 처리
    document.getElementById("btn1").onclick = function(){
        RoadMapFind("naver",126.9783785,37.5666612,"서울시청");
    }
    // btn2 클릭시 처리
    document.getElementById("btn2").onclick = function(){
        RoadMapFind("kakao",126.9783785,37.5666612,"서울시청");
    }
    // btn3 클릭시 처리
    document.getElementById("btn3").onclick = function(){
        RoadMapFind("tmap",126.9783785,37.5666612,"서울시청");
    }
}
</script>
 </head>
<body>
<header>
    <h1>길안내</h1>
</header>
<section>
    <h2>길찾기</h2>
    <nav>
        <a id="btn1">네이버</a> |
        <a id="btn2">카카오</a> |
        <a id="btn3">티맵</a> |
        <a onclick="RoadMapFind('naver',126.9783785,37.5666612,'서울시청')">네이버Click</a> |
        <a onclick="RoadMapFind('kakao',126.9783785,37.5666612,'서울시청')">카카오Click</a> |
        <a onclick="RoadMapFind('tmap',126.9783785,37.5666612,'서울시청')">티맵Click</a>
    </nav>
    <p>티맵은 어플로만 호출가능</p>
</section>
<footer></footer>
 </body>
</html>

댓글 없음:

댓글 쓰기