美食餐饮店记录程序（基于googleMapApi）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>美食餐饮店记录程序（基于googleMapApi）</title> 6 </head> 7 <body> 8 <h3>记录美食餐饮店</h3> 9 <div id="new_div"> 10 店名：<input id="name_txt" type="text" value="" size="20" /> 11 <input id="save_btn" type="button" value="保存" /> 12 </div> 13 <div id="list_div"> 14 15 </div> 16 </body> 17 <script> 18 function $(id){ 19 return document.getElementById(id); 20 } 21 //初始化处理 22 var items =[]; 23 window.onload=function(){ 24 if(window.localStorage==undefined && navigator.geolocation==undefined){ 25 alert("不支持web本地存储与Geolocation"); 26 return; 27 } 28 //显示已经保存的餐饮店 29 var list = localStorage.getItem('shoplist'); 30 if(list==null){ 31 list = ""; 32 }else{ 33 items = list.split('\n'); 34 showItems(); 35 } 36 $('save_btn').onclick=save_btn_clickHandler; 37 function showItems(){ 38 var map_uri = "http://maps.google.co.jp/?q="; 39 var html="<ul>"; 40 for(var i in items){ 41 var data=items[i].split("\t"); 42 var name = data[0]; 43 var lat = data[1]; 44 var lon = data[2]; 45 var link = "<a href='"+map_uri+lat+','+lon+"'>"+name+"</a>"; 46 html+="<li>"+link+"</li>"; 47 } 48 html+="</ul>"; 49 $('list_div').innerHTML=html; 50 } 51 //单击保存按钮时的事件处理函数 52 function save_btn_clickHandler(){ 53 if($('name_txt').value==""){ 54 alert("请输入店名");return; 55 } 56 //得到地理位置信息 57 navigator.geolocation.getCurrentPosition(successCallback,errCallback); 58 $('save_btn').value='正在存取当前位置信息'; 59 } 60 //成功时 61 function successCallback(position){ 62 var lat = position.coords.latitude; 63 var lon = position.coords.longitude; 64 var name_txt =$('name_txt'); 65 //保存店名+位置信息 66 var item = name_txt.value+'\t'+lat+'\t'+lon; 67 items.push(item); 68 var list = items.join('\n'); 69 try{ 70 localStorage.removeItem('shoplist'); 71 localStorage.setItem('shoplist',list); 72 }catch(e){ 73 alert('保存失败'); 74 } 75 $('save_btn').value = '保存'; 76 name_txt.value=""; 77 showItems(); 78 } 79 //失败时 80 function errCallback(err){ 81 alert(err.message); 82 $('save_btn'),value="保存" 83 } 84 85 } 86 </script> 87 </html>
效果图：（获取的信息是自己本人所在地的经纬度）
