1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!doctype html><html><head><meta charset="utf-8"><title>길안내버튼</title><script>// 길찾기 functionfunction 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 "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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!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)