{"id":198,"date":"2025-11-25T09:24:50","date_gmt":"2025-11-25T01:24:50","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=198"},"modified":"2025-11-25T09:32:54","modified_gmt":"2025-11-25T01:32:54","slug":"198","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/198\/","title":{"rendered":"Html5\u83b7\u53d6\u7528\u6237\u5f53\u524d\u4f4d\u7f6e\u7684\u51e0\u79cd\u65b9\u5f0f"},"content":{"rendered":"\n<p>HTML5 \u83b7\u53d6\u7528\u6237\u4f4d\u7f6e\u4e3b\u8981\u6709 <strong>\u51e0\u79cd\u65b9\u5f0f<\/strong>\uff0c\u53d6\u51b3\u4e8e\u7cbe\u5ea6\u9700\u6c42\u3001\u8bbe\u5907\u652f\u6301\u548c\u573a\u666f\u3002\u4e0b\u9762\u6211\u7ed9\u4f60\u6574\u7406\u8be6\u7ec6\u8bf4\u660e\u4e0e\u793a\u4f8b\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u4f7f\u7528 HTML5 Geolocation API\uff08\u6700\u5e38\u7528\uff09<\/h2>\n\n\n\n<p><strong>\u7279\u70b9<\/strong>\uff1a\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301\uff0c\u83b7\u53d6\u7ecf\u7eac\u5ea6\u3001\u901f\u5ea6\u3001\u65b9\u5411\u7b49\uff1b\u7cbe\u5ea6\u53d6\u51b3\u4e8e\u8bbe\u5907\uff08GPS &gt; Wi-Fi &gt; IP\u5b9a\u4f4d\uff09\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nif (navigator.geolocation) {\n  navigator.geolocation.getCurrentPosition(\n    function(position) {\n      console.log(&#039;\u7ecf\u5ea6:&#039;, position.coords.longitude);\n      console.log(&#039;\u7eac\u5ea6:&#039;, position.coords.latitude);\n      console.log(&#039;\u7cbe\u5ea6:&#039;, position.coords.accuracy, &#039;\u7c73&#039;);\n    },\n    function(error) {\n      console.error(&#039;\u5b9a\u4f4d\u5931\u8d25&#039;, error);\n    },\n    {\n      enableHighAccuracy: true, \/\/ \u662f\u5426\u4f7f\u7528\u9ad8\u7cbe\u5ea6\u6a21\u5f0f\uff08GPS\uff09\n      timeout: 10000,           \/\/ \u8d85\u65f6\u65f6\u95f4\n      maximumAge: 0             \/\/ \u7f13\u5b58\u6709\u6548\u65f6\u95f4\n    }\n  );\n} else {\n  alert(&#039;\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u5730\u7406\u4f4d\u7f6eAPI&#039;);\n}\n\n<\/pre><\/div>\n\n\n<p><strong>\u8bf4\u660e<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>position.coords<\/code> \u5305\u542b <code>latitude, longitude, accuracy, altitude, speed, heading<\/code><\/li>\n\n\n\n<li>\u7528\u6237\u4f1a\u88ab\u6d4f\u89c8\u5668\u63d0\u793a\u662f\u5426\u5141\u8bb8\u83b7\u53d6\u4f4d\u7f6e<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u4f7f\u7528 IP \u5730\u5740\u5b9a\u4f4d\uff08\u670d\u52a1\u7aef\u6216\u7b2c\u4e09\u65b9\u63a5\u53e3\uff09<\/h2>\n\n\n\n<p><strong>\u7279\u70b9<\/strong>\uff1a\u65e0\u9700\u7528\u6237\u6388\u6743\uff0c\u4f46\u7cbe\u5ea6\u4e00\u822c\u5728\u57ce\u5e02\/\u533a\u57df\u7ea7\u522b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfetch(&#039;https:\/\/ipapi.co\/json\/&#039;)   \/\/ \u793a\u4f8b\u7b2c\u4e09\u65b9 API\n  .then(res =&gt; res.json())\n  .then(data =&gt; {\n    console.log(&#039;IP\u5b9a\u4f4d\u7ed3\u679c:&#039;, data);\n    console.log(&#039;\u7ecf\u5ea6:&#039;, data.longitude);\n    console.log(&#039;\u7eac\u5ea6:&#039;, data.latitude);\n    console.log(&#039;\u57ce\u5e02:&#039;, data.city);\n  })\n  .catch(err =&gt; console.error(err));\n\n<\/pre><\/div>\n\n\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u517c\u5bb9\u6240\u6709\u6d4f\u89c8\u5668\u3001\u79fb\u52a8\u7aef\u548c\u684c\u9762\u7aef<br><strong>\u7f3a\u70b9<\/strong>\uff1a\u7cbe\u5ea6\u4f4e\uff0c\u53ef\u80fd\u53ea\u5230\u57ce\u5e02\u7ea7<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u4f7f\u7528 Wi-Fi \/ \u57fa\u7ad9\u5b9a\u4f4d\uff08\u9700\u8c03\u7528\u7b2c\u4e09\u65b9 SDK\uff09<\/h2>\n\n\n\n<p><strong>\u7279\u70b9<\/strong>\uff1a\u4e3b\u8981\u7528\u4e8e\u79fb\u52a8\u7aef App\uff0cH5 \u53ef\u901a\u8fc7 <strong>\u767e\u5ea6\u5730\u56fe JS API \/ \u9ad8\u5fb7\u5730\u56fe JS API<\/strong> \u8c03\u7528\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u9ad8\u5fb7\u793a\u4f8b\uff08H5 \u6d4f\u89c8\u5668\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script src=&quot;https:\/\/webapi.amap.com\/maps?v=2.0&amp;amp;key=\u4f60\u7684\u9ad8\u5fb7Key&quot;&gt;&amp;lt;\/script&gt;\n&amp;lt;script&gt;\n  AMap.plugin(&#039;AMap.Geolocation&#039;, function() {\n    const geolocation = new AMap.Geolocation({\n      enableHighAccuracy: true,\n      timeout: 10000\n    });\n    geolocation.getCurrentPosition((status, result) =&gt; {\n      if(status === &#039;complete&#039;) {\n        console.log(&#039;\u7ecf\u5ea6:&#039;, result.position&#x5B;0]);\n        console.log(&#039;\u7eac\u5ea6:&#039;, result.position&#x5B;1]);\n      } else {\n        console.error(&#039;\u5b9a\u4f4d\u5931\u8d25:&#039;, result);\n      }\n    });\n  });\n&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<p><strong>\u8bf4\u660e<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7cbe\u5ea6\u6bd4\u7eaf IP \u5b9a\u4f4d\u9ad8<\/li>\n\n\n\n<li>\u53ef\u4ee5\u81ea\u52a8\u7ed3\u5408 Wi-Fi\u3001\u57fa\u7ad9\u3001GPS<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 \u6df7\u5408\u65b9\u5f0f<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>H5 + \u7b2c\u4e09\u65b9\u5730\u56fe SDK<\/strong>\uff1a\u53ef\u7ed3\u5408 Geolocation API + \u5730\u56fe SDK \u4f4d\u7f6e\u4fee\u6b63\uff0c\u63d0\u9ad8\u7cbe\u5ea6<\/li>\n\n\n\n<li><strong>\u6d4f\u89c8\u5668 + IP fallback<\/strong>\uff1a\u5148\u5c1d\u8bd5 <code>navigator.geolocation<\/code>\uff0c\u82e5\u7528\u6237\u62d2\u7edd\u518d\u7528 IP \u5b9a\u4f4d<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u603b\u7ed3<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6cd5<\/th><th>\u7528\u6237\u6388\u6743<\/th><th>\u7cbe\u5ea6<\/th><th>\u9002\u7528\u573a\u666f<\/th><\/tr><\/thead><tbody><tr><td><code>navigator.geolocation<\/code><\/td><td>\u9700\u8981<\/td><td>\u9ad8\uff08GPS\u53ef\u8fbe\u6570\u7c73\uff09<\/td><td>\u7f51\u9875\u3001\u79fb\u52a8\u7aef H5<\/td><\/tr><tr><td>IP \u5730\u5740\u5b9a\u4f4d<\/td><td>\u4e0d\u9700\u8981<\/td><td>\u4f4e\uff08\u57ce\u5e02\u7ea7\uff09<\/td><td>\u684c\u9762\u7aef\u3001\u5feb\u901f\u5b9a\u4f4d<\/td><\/tr><tr><td>Wi-Fi \/ \u57fa\u7ad9\u5b9a\u4f4d\uff08\u7b2c\u4e09\u65b9API\uff09<\/td><td>\u53ef\u80fd\u9700\u8981<\/td><td>\u4e2d\u9ad8<\/td><td>\u79fb\u52a8\u7aef H5\/APP<\/td><\/tr><tr><td>\u6df7\u5408\u65b9\u5f0f<\/td><td>\u6839\u636e\u60c5\u51b5<\/td><td>\u9ad8<\/td><td>\u517c\u987e\u517c\u5bb9\u6027\u548c\u7cbe\u5ea6<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>H5 \u5b9e\u7528\u5b9a\u4f4d Demo<\/strong>\uff0c\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f18\u5148\u4f7f\u7528 <strong>HTML5 Geolocation API<\/strong><\/li>\n\n\n\n<li>\u7528\u6237\u62d2\u7edd\u6216\u4e0d\u652f\u6301\u65f6\u81ea\u52a8\u964d\u7ea7\u5230 <strong>IP \u5b9a\u4f4d<\/strong><\/li>\n\n\n\n<li>\u8f93\u51fa\u7ecf\u7eac\u5ea6\u3001\u7cbe\u5ea6\u3001\u57ce\u5e02\u4fe1\u606f<\/li>\n\n\n\n<li>\u79fb\u52a8\u7aef\/\u684c\u9762\u7aef\u517c\u5bb9<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;H5 \u5b9e\u7528\u5b9a\u4f4d Demo&amp;lt;\/title&gt;\n&amp;lt;style&gt;\n  body { font-family: Arial; padding: 20px; }\n  #output { margin-top: 20px; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;h1&gt;H5 \u5b9e\u7528\u5b9a\u4f4d Demo&amp;lt;\/h1&gt;\n&amp;lt;button id=&quot;getLocation&quot;&gt;\u83b7\u53d6\u5f53\u524d\u4f4d\u7f6e&amp;lt;\/button&gt;\n\n&amp;lt;div id=&quot;output&quot;&gt;&amp;lt;\/div&gt;\n\n&amp;lt;script&gt;\nconst output = document.getElementById(&#039;output&#039;);\nconst button = document.getElementById(&#039;getLocation&#039;);\n\nbutton.addEventListener(&#039;click&#039;, () =&gt; {\n  output.innerHTML = &#039;\u6b63\u5728\u83b7\u53d6\u4f4d\u7f6e...&#039;;\n  \n  \/\/ 1\ufe0f\u20e3 \u9996\u9009 HTML5 Geolocation API\n  if(navigator.geolocation){\n    navigator.geolocation.getCurrentPosition(\n      (position) =&gt; {\n        const lat = position.coords.latitude.toFixed(6);\n        const lng = position.coords.longitude.toFixed(6);\n        const acc = position.coords.accuracy.toFixed(2);\n        output.innerHTML = `\n          &amp;lt;p&gt;\u5b9a\u4f4d\u65b9\u5f0f\uff1aHTML5 Geolocation API&amp;lt;\/p&gt;\n          &amp;lt;p&gt;\u7ecf\u5ea6\uff1a${lng}&amp;lt;\/p&gt;\n          &amp;lt;p&gt;\u7eac\u5ea6\uff1a${lat}&amp;lt;\/p&gt;\n          &amp;lt;p&gt;\u7cbe\u5ea6\uff1a${acc} \u7c73&amp;lt;\/p&gt;\n        `;\n      },\n      (error) =&gt; {\n        console.warn(&#039;Geolocation API\u5b9a\u4f4d\u5931\u8d25:&#039;, error);\n        \/\/ 2\ufe0f\u20e3 \u964d\u7ea7\u4f7f\u7528IP\u5b9a\u4f4d\n        ipLocation();\n      },\n      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }\n    );\n  } else {\n    \/\/ \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\n    ipLocation();\n  }\n});\n\n\/\/ \u4f7f\u7528 IP \u5b9a\u4f4d\uff08\u7b2c\u4e09\u65b9 API \u793a\u4f8b\uff09\nfunction ipLocation(){\n  fetch(&#039;https:\/\/ipapi.co\/json\/&#039;)\n    .then(res =&gt; res.json())\n    .then(data =&gt; {\n      output.innerHTML = `\n        &amp;lt;p&gt;\u5b9a\u4f4d\u65b9\u5f0f\uff1aIP \u5730\u5740&amp;lt;\/p&gt;\n        &amp;lt;p&gt;\u7ecf\u5ea6\uff1a${data.longitude}&amp;lt;\/p&gt;\n        &amp;lt;p&gt;\u7eac\u5ea6\uff1a${data.latitude}&amp;lt;\/p&gt;\n        &amp;lt;p&gt;\u57ce\u5e02\uff1a${data.city}&amp;lt;\/p&gt;\n        &amp;lt;p&gt;\u533a\u57df\uff1a${data.region}&amp;lt;\/p&gt;\n        &amp;lt;p&gt;\u56fd\u5bb6\uff1a${data.country_name}&amp;lt;\/p&gt;\n      `;\n    })\n    .catch(err =&gt; {\n      output.innerHTML = &#039;&amp;lt;p&gt;\u65e0\u6cd5\u83b7\u53d6\u4f4d\u7f6e: &#039; + err + &#039;&amp;lt;\/p&gt;&#039;;\n    });\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4f18\u5148\u4f7f\u7528\u9ad8\u7cbe\u5ea6\u5b9a\u4f4d<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>enableHighAccuracy: true<\/code>\uff0cGPS\u4f18\u5148<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u81ea\u52a8\u964d\u7ea7 IP \u5b9a\u4f4d<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5f53\u7528\u6237\u62d2\u7edd\u6216\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u65f6\u4f7f\u7528 IP \u5b9a\u4f4d<\/li>\n\n\n\n<li>\u7cbe\u5ea6\u8f83\u4f4e\uff0c\u4f46\u4fdd\u8bc1\u83b7\u53d6\u5230\u5927\u6982\u4f4d\u7f6e<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u8f93\u51fa\u8be6\u7ec6\u4fe1\u606f<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u7ecf\u5ea6\u3001\u7eac\u5ea6\u3001\u7cbe\u5ea6<\/li>\n\n\n\n<li>IP \u5b9a\u4f4d\u65f6\u589e\u52a0\u57ce\u5e02\u3001\u533a\u57df\u3001\u56fd\u5bb6\u4fe1\u606f<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u517c\u5bb9\u79fb\u52a8\u7aef<\/strong>\n<ul class=\"wp-block-list\">\n<li>iOS\/Android \u6d4f\u89c8\u5668\u3001\u684c\u9762\u7aef\u5747\u53ef\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 \u83b7\u53d6\u7528\u6237\u4f4d\u7f6e\u4e3b\u8981\u6709 \u51e0\u79cd\u65b9\u5f0f\uff0c\u53d6\u51b3\u4e8e\u7cbe\u5ea6\u9700\u6c42\u3001\u8bbe\u5907\u652f\u6301\u548c\u573a\u666f\u3002\u4e0b\u9762\u6211&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/198\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-198","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":3,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/198\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}