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>
效果图：（获取的信息是自己本人所在地的经纬度）
时间： 2024-11-05 19:29:49