<!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>
23. 9. 8.
길찾기 호출(위도,경도) Function (feat. 네이버,카카오,티맵)
23. 7. 19.
Javascript Text To Speak (TTS)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TTS Sample</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#samplediv{ display:flex; flex-grow:1; width:100%;}
#speaktextarea{ flex-grow:1; height:200px; border:1px solid #000; font-size:24px; padding:6px;}
.btn{ display:flex; justify-content:center; align-items:center; background-color:#000; color:#fff; width:120px;}
</style>
<script>
function TextToSpeak(textstring)
{
// 지원확인
if(window.speechSynthesis)
{
const ssu = new SpeechSynthesisUtterance()
const synth = window.speechSynthesis
ssu.text = textstring;
synth.speak(ssu);
}
else
{
alert("지원안됨")
}
}
</script>
</head>
<body>
<div id="samplediv">
<textarea name="speaktextarea" id="speaktextarea"></textarea>
<a class="btn" onClick="TextToSpeak(document.getElementById('speaktextarea').value);">TTS</a>
</div>
</body>
</html>
피드 구독하기:
글 (Atom)