HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 – 网络浏览器中的位置检测大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一种方法来访问我的网站时找到用户位置,我尝试过maxmind,但他们似乎在城市级别不准确.
我想要的信息是(国家,城市,经度,纬度)我希望国家和城市尽可能准确.

我也使用过HTML5但问题是它要求我的用户共享位置信息,这对我来说似乎是不好的解决方案. (然我得到了非常准确的结果)

解决方案吗

注意:我发现谷歌搜索一个准确的检测,没有“要求分享我的位置”,但我没有找到任何api使用谷歌服务

解决方法

这是我使用Google地图找到Geo LOCATIOn教程的代码.希望这很有用.

这适用于您连接到网络的方式.

>如果您使用Boradband ISP,那么为您提供固定IP的位置
会更准确.
>如果您使用移动设备连接到互联网,将显示最近的移动塔的位置,您的网络将从该位置获取信号

HTML5地理位置示例

<!DOCTYPE html>
<html>
<head>
<title>GeoLOCATIOn Demo</title>
<Meta charset="utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
  var startPos;
  var map;

  function init() {
      if (navigator.geoLOCATIOn) {
          document.getElementById("support").innerHTML = "<p style='color:green'>Great! This browser supports HTML5 GeoLOCATIOn</p>";
          navigator.geoLOCATIOn.getCurrentPosition(updateLOCATIOn,handleLOCATIOnError,{
              timeout: 50000
          });
          //navigator.geoLOCATIOn.watchPosition(updateCurrPosition,handleLOCATIOnError);

      } else {
          document.getElementById("support").innerHTML = "<p style='color:red'>Oops! This browser does not support HTML5 GeoLOCATIOn</p>";
      }
  }

  function updateLOCATIOn(position) {
      startPos = position;
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;

      //document.getElementById("startLat").innerHTML = latitude;
      //document.getElementById("startLon").innerHTML = longitude;

      var coords = new google.maps.LatLng(latitude,longitudE);

      var mapOptions = {
          zoom: 10,center: coords,mapTypeControl: false,navigationControlOptions: {
              style: google.maps.NavigationControlStyle.smaLL
          },mapTypEID: google.maps.MapTypEID.roaDMAP
      };

      map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

      var marker = new google.maps.Marker({
          position: coords,map: map,title: "Your current LOCATIOn!"
      });

  }

  function handleLOCATIOnError(error) {
      switch (error.codE) {
          case 0:
              updateStatus("There was an error while retrieving your LOCATIOn: " + error.messagE);
              break;

          case 1:
              updateStatus("The user prevented this page from retrieving the LOCATIOn.");
              break;

          case 2:
              updateStatus("The browser was unable to determine your LOCATIOn: " + error.messagE);

              break;

          case 3:

              updateStatus("The browser timed out before retrieving the LOCATIOn.");

              break;
      }
  }

  function updateStatus(msg) {
      document.getElementById("divStatus").innerHTML = msg;
  }
</script>
</head>

<body onload="init()">  
<div id="support"></div>
<div id="divStatus"></div>
<div id="map_canvas" style="width:600px;height:400px;"></div>
</body>
</html>

大佬总结

以上是大佬教程为你收集整理的html5 – 网络浏览器中的位置检测全部内容,希望文章能够帮你解决html5 – 网络浏览器中的位置检测所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。