美食餐饮店记录程序（基于googleMapApi）

Posted 2020-10-14 gaoxuerong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美食餐饮店记录程序（基于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>

效果图：（获取的信息是自己本人所在地的经纬度）

以上是关于美食餐饮店记录程序（基于googleMapApi）的主要内容，如果未能解决你的问题，请参考以下文章

美食小吃加盟网站源码餐饮奶茶招商加盟类网站

舌尖上的美食，餐饮文化宣传简介PPT模板

HTML+CSS美食静态网页设计——简单牛排美食餐饮(9个页面)公司网站模板企业网站实现

中星银通餐饮平板点餐使用指南

东方斯贝拉餐饮选对创业品牌至关重要

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段