Browse Source

Step 2: use the API to get current location.

Frederic G. MARAND 10 năm trước cách đây
mục cha
commit
4191e61265
10 tập tin đã thay đổi với 141 bổ sung0 xóa
  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

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

+ 5 - 0
.idea/encodings.xml

@@ -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

@@ -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

@@ -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

@@ -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

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

+ 7 - 0
.idea/vcs.xml

@@ -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

@@ -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

@@ -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

@@ -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.');
+}