<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>맛집기록 어플</title>
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0" />
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="geo-shop.js"></script>
</head><body>
<h3>맛집기록 어플</h3>
<div id="new_div">
맛집이름:<input type="text" id="name_txt" value="" size="20" /> <br />
<input type="button" id="save_btn" value="기록" />
</div>
<div id="list_div">없음</div>
</body>
</html>
function $(id) { return document.getElementById(id); }
var items = [];
var list_div;
window.[안내]태그제한으로등록되지않습니다-xxonload = function(){
if (window.localStorage == undefined &&
navigator.geolocation == undefined) {
alert("HTML5 미대응 브라우저입니다."); return;
}
list_div = $("list_div");
//기존 리스트 표시
var list = localStorage.getItem("shoplist");
if (list == null) {
list = "";
} else {
items = list.split("\n");
showItems();
}
//기록 버튼 이벤트 처리
$("save_btn").[안내]태그제한으로등록되지않습니다-xxonclick = save_btn_clickHandler;
}
//맛집 리스트 표시
function showItems() {
var map_uri = "http://maps.google.co.kr/?q=";
var html = "<ul>";
for (var i in items) {
var data = items[i].split("\t");
var name = data[0];
var lat = data[1];
var lon = data[2];
var link = "<a href='" + map_uri + lat + "," + lon + "'>" + name + "</a>";
html += "<li>" + link + "</li>";
}
html += "</ul>";
$("list_div").innerHTML = html;
}
//기록 버튼을 눌렀을 때 이벤트 처리
function save_btn_clickHandler() {
if ($("name_txt").value == "") {
alert("맛집이름을 입력해 주십시오"); return;
}
//위치 정보 취득
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback);
$("save_btn").value = "현재위치취득중...";
}
//성공했을 때
function successCallback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var name_txt = $("name_txt");
var item = name_txt.value + "\t" + lat + "\t" + lon;
items.push(item);
var list = items.join("\n");
try {
localStorage.removeItem("shoplist");
localStorage.setItem("shoplist", list);
} catch(err) {
alert("저장실패");
}
$("save_btn").value = "기록";
showItems();
}
//실패했을 때
function errorCallback(err) {
alert("실패:" + err.message);
$("save_btn").value = "기록";
}
첫댓글 좋은자료 감사합니다.강사님..^^