Home Explore Help
Register Sign In
fgm
/
js__geolocation
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Step 2: use the API to get current location.

Frederic G. MARAND 10 years ago
parent
97c604816b
commit
4191e61265
10 changed files with 141 additions and 0 deletions
Split View Show Diff Stats
  1. 1 0
      .idea/.name
  2. 5 0
      .idea/encodings.xml
  3. 9 0
      .idea/geoloc.iml
  4. 33 0
      .idea/misc.xml
  5. 9 0
      .idea/modules.xml
  6. 5 0
      .idea/scopes/scope_settings.xml
  7. 7 0
      .idea/vcs.xml
  8. 2 0
      geo1.html
  9. 16 0
      geo2.html
  10. 54 0
      geo2.js

+ 1 - 0
.idea/.name
View File 

@@ -0,0 +1 @@
 
+geoloc

+ 5 - 0
.idea/encodings.xml
View File 

@@ -0,0 +1,5 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
 
+</project>
 
+

+ 9 - 0
.idea/geoloc.iml
View File 

@@ -0,0 +1,9 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="WEB_MODULE" version="4">
 
+  <component name="NewModuleRootManager">
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>
 
+

+ 33 - 0
.idea/misc.xml
View File 

@@ -0,0 +1,33 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectInspectionProfilesVisibleTreeState">
 
+    <entry key="Project Default">
 
+      <profile-state>
 
+        <expanded-state>
 
+          <State>
 
+            <id />
 
+          </State>
 
+          <State>
 
+            <id>CSS</id>
 
+          </State>
 
+          <State>
 
+            <id>RELAX NG</id>
 
+          </State>
 
+          <State>
 
+            <id>XPath</id>
 
+          </State>
 
+          <State>
 
+            <id>XSLT</id>
 
+          </State>
 
+        </expanded-state>
 
+        <selected-state>
 
+          <State>
 
+            <id>Bash</id>
 
+          </State>
 
+        </selected-state>
 
+      </profile-state>
 
+    </entry>
 
+  </component>
 
+  <component name="ProjectRootManager" version="2" />
 
+</project>
 
+

+ 9 - 0
.idea/modules.xml
View File 

@@ -0,0 +1,9 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/geoloc.iml" filepath="$PROJECT_DIR$/.idea/geoloc.iml" />
 
+    </modules>
 
+  </component>
 
+</project>
 
+

+ 5 - 0
.idea/scopes/scope_settings.xml
View File 

@@ -0,0 +1,5 @@
 
+<component name="DependencyValidationManager">
 
+  <state>
 
+    <option name="SKIP_IMPORT_STATEMENTS" value="false" />
 
+  </state>
 
+</component>

+ 7 - 0
.idea/vcs.xml
View File 

@@ -0,0 +1,7 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="VcsDirectoryMappings">
 
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
 
+  </component>
 
+</project>
 
+

+ 2 - 0
geo1.html
View File 

@@ -10,6 +10,8 @@
 
       present in this browser or not.</p>
 
 
     <div id="geo"></div>
 
+
 
+    <p><a href="geo2.html">Next</a></p>
 
     </body>
 
 
   <script>

+ 16 - 0
geo2.html
View File 

@@ -0,0 +1,16 @@
 
+<html>
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
+    <title>Geolocation demo step 2</title>
 
+    </head>
 
+
 
+  <body>
 
+    <h1>Step 2: request current location</h1>
 
+    <p>Since we can check the Geolocation API from <a href="geo1.html">step 1</a>,
 
+      let us go one step further and use it to obtain geolocation information.</p>
 
+
 
+    <div id="geo"></div>
 
+    </body>
 
+
 
+  <script src="geo2.js"></script>
 
+  </html>

+ 54 - 0
geo2.js
View File 

@@ -0,0 +1,54 @@
 
+function isGeoAvailable() {
 
+  "use strict";
 
+  return navigator.geolocation;
 
+}
 
+
 
+function setMessage(message) {
 
+  "use strict";
 
+  var geo = document.getElementById("geo");
 
+  if (geo) {
 
+    geo.innerHTML = message;
 
+  }
 
+  else {
 
+    console.log("message:", message);
 
+  }
 
+}
 
+
 
+function getPositionMessage(position) {
 
+  "use strict";
 
+
 
+  var coords = position.coords;
 
+
 
+  var date = new Date(position.timestamp);
 
+
 
+  var message = "<p>Position: </p>\n" +
 
+    "<ul>\n" +
 
+    "  <li>Timestamp: " + position.timestamp + " = " + date.toLocaleString() + "</li>\n" +
 
+    "  <li>Accuracy: " + coords.accuracy + " meters</li>\n" +
 
+    "  <li>Latitude: " + coords.latitude + "</li>" +
 
+    "  <li>Longitude: " + coords.longitude + "</li>" +
 
+    "  <li>Altitude: " + (coords.altitude ? coords.altitude : "unknown") + "</li>" +
 
+    "  <li>Altitude Accuracy: " + (coords.altitudeAccuracy ? coords.altitudeAccuracy : 0) + "</li>" +
 
+    "  <li>Heading: " + (coords.heading ? coords.heading : "unknown") + "</li>\n" +
 
+    "  <li>Speed: " + (coords.speed ? coords.speed : "unknown") + "</li>\n"
 
+    "  </ul>\n";
 
+
 
+  return message;
 
+}
 
+
 
+function showPositionMessage(position) {
 
+  "use strict";
 
+  setMessage(getPositionMessage(position));
 
+}
 
+
 
+function showPositionError(error) {
 
+  "use strict";
 
+  setMessage(error);
 
+}
 
+
 
+if (isGeoAvailable()) {
 
+  navigator.geolocation.getCurrentPosition(showPositionMessage, showPositionError);
 
+}
 
+else {
 
+  setMessage('Geolocation API is not available.');
 
+}