Adding the tutorial to the project

2026-04-23 00:00:09 +08:00 · 2010-02-25 10:12:31 -08:00
parent f93c2badcc
commit c3c5d522a3
25 changed files with 2546 additions and 0 deletions
@@ -0,0 +1,176 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <meta name="viewport" content="width=320; user-scalable=no" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>PhoneGap</title>
+    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	<style>
+	
+
+img {
+	border: 0;
+}
+#container {
+
+}
+#tweetList {
+	color: #ddd;
+}
+#tweetList .tweet {
+	padding: 8px;
+	background:rgba(64,64,64,0.5);
+	border: 1px solid rgba(128,128,128,0.5);
+	opacity: 0.8;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	margin-bottom: .5em;
+}
+
+#tweetList a {
+	color: #f30;
+	text-decoration: underline;
+}
+#tweetList .avatar {
+	float: left;
+}
+#tweetList .content {
+	padding-left: 55px;
+}
+#tweetList .extra {
+	color: #666;
+	font-size: 85%
+}
+	</style>
+    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
+    <script type="text/javascript" charset="utf-8">
+	
+	
+
+
+
+	var url = "http://search.twitter.com/search.json?callback=getTweets";
+    
+	var intervalID;
+	
+
+    function preventBehavior(e) { e.preventDefault(); };
+
+	
+	function onWinLoad()
+	{
+		document.addEventListener("deviceready",onDeviceReady,false);
+	}
+	
+	function onDeviceReady()
+	{
+		
+		var funk = function(position)
+		{
+			callback(position.coords.latitude, position.coords.longitude); 
+		};
+		
+		var fail = function(error)
+		{
+			alert("error :: "  + error);
+		}
+
+		intervalID = navigator.geolocation.watchPosition(funk,fail);
+		
+		
+	
+		window.addEventListener("unload",onWindowUnload,false);
+	}
+	
+	function onBackBtn()
+	{
+		navigator.geolocation.clearWatch(intervalID);
+	}
+	
+
+
+	
+	function onWindowUnload()
+	{
+		
+	}
+	
+	function getCurrentLocation()
+	{
+		document.getElementById("location2").innerHTML = "Getting current location ...";
+		var funk = function(position)
+		{
+			document.getElementById("location2").innerHTML = "Lat: "+position.coords.latitude+ " Lon: " +position.coords.longitude;
+		};
+		
+		var fail = function(error)
+		{
+			alert("error :: "  + error);
+		}
+		navigator.geolocation.getCurrentPosition(funk,fail);
+	}
+	
+
+	
+	function callback(lat, lon) 
+	{ 
+		//navigator.geolocation.stop();
+		//alert("Callback :: " + lat + "," + lon);
+		print(lat,lon);
+		
+	var geocode = "&geocode=" + lat + "%2C" + lon + "%2C1mi"; 
+	var fullUrl = url + geocode; 
+	var head = document.getElementsByTagName('head'); 
+	var script = document.createElement('script'); 
+	script.src = fullUrl; 
+	head[0].appendChild(script); 
+}
+
+function getTweets(json) { 
+	var q; 
+	var parent = document.getElementById('tweetList'); 
+	parent.innerHTML = ''; 
+	var child; 
+
+	for (var i = 0; i < json.results.length; i++) { 
+	   q = json.results[i]; 
+	   child = document.createElement("div"); 
+	   child.setAttribute("class","tweet");
+	   child.innerHTML = '<div class="avatar"><img src="'+q.profile_image_url+'" alt="avatar" width="48" height="48" /></div>';
+	   child.innerHTML += '<div class="content"><a href="http://m.twitter.com/'+q.from_user+'">'+q.from_user+'</a> '+q.text+'<div class="extra">'+q.location+' ('+q.created_at+')</div></div>';
+	   parent.appendChild(child); 
+	} 
+}
+
+function print(lat,lon)
+{
+	document.getElementById("location1").innerHTML = "Lat: "+lat+ " Lon: " +lon;// + " TS: " + (new Date().getTime());
+}
+
+    
+    </script>
+  </head>
+  
+  <body id="stage" class="theme" onload="onWinLoad()">
+  	<div class="topBar">
+		<a href="index.html" onclick="onBackBtn()">
+			<span class="back_button">Back</span>
+		</a>
+		<span class="pageTitle">GeoLocation</span>	
+	</div>
+		<div id="container"> 
+		
+		<div class="item" style="text-align:center;" id="location1">Getting your current location ...</div>
+		
+		<p>Find who are tweeting within 1 mile radius of where you are!</p>
+
+
+
+		<div id="tweetList"> 
+ 
+		</div> 
+ 
+	</div> 
+  </body>
+</html>