推荐网站 https://html5demos.com/geo/　

　我们有时候可能希望首先获得用户的地理位置，然后根据不同的地理位置（更具针对性地）推送不同的信息等等。

　　下面这段代码就可以在你有jQuery的条件下alert()你所在的区域：

$.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js", function () {

        var province = remote_ip_info["province"] + '省';

        alert(province);

});

　　由于依赖的是jQuery，所以将$换成jQuery也可以达到相同的效果。

jQuery.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js", function () {

        var province = remote_ip_info["province"] + '省';

        alert(province);

     });

　　我们可以看到调用了jQuery的一个方法，其中第一个参数是一个url，然后第二个参数时一个回调函数，这个回调函数中remote_ip_info["province"]即可得到用户所在的省份。

　　既然province时remote_ip_info对象的其中一个属性，那么remote_ip_info一定还有其他的属性，我们通过下面的代码来观察remote_ip_info这个对象究竟是什么：

$.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js", function () {

          console.log(remote_ip_info);

     });

　　在我的控制台中可以得到下面的信息：

　　即remote_ip_info对象中有city、country、desc 、disctrict、 isp、province、 ret、 start、 type等属性。 其中我们最为需要的恐怕是 中国-陕西-西安 了。

　　那为什么是这样的结果呢？ 我们将第一个参数（url）输入到浏览器的地址栏中，可以看到，得到如下的代码：

var remote_ip_info = {"ret":,"start":-,"end":-,"country":"\u4e2d\u56fd","province":"\u9655\u897f","city":"\u897f\u5b89","district":"","isp":"","type":"","desc":""};

　　我们可以看到他就是定义了这样的一个对象，我们得到的就是对应格式的对象。

使用谷歌地图。

<html>

    <meta name="viewport" content="width=620" />

    <title>geolocation</title>

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

        <article>

          <p>Finding your location: <span id="status">checking...</span></p>

        </article>

    <script>

    function success(position) {

      var s = document.querySelector('#status');

      if (s.className == 'success') {

        // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back

        return;

      }

      s.innerHTML = "found you!";

      s.className = 'success';

      var mapcanvas = document.createElement('div');

      mapcanvas.id = 'mapcanvas';

      mapcanvas.style.height = '400px';

      mapcanvas.style.width = '560px';

      document.querySelector('article').appendChild(mapcanvas);

      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      var myOptions = {

        zoom: 15,

        center: latlng,

        mapTypeControl: false,

        // mapTypeControl: true,

        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

        mapTypeId: google.maps.MapTypeId.ROADMAP

      };

      var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

      var marker = new google.maps.Marker({

          position: latlng,

          map: map,

          title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"

      });

    }

    function error(msg) {

      var s = document.querySelector('#status');

      s.innerHTML = typeof msg == 'string' ? msg : "failed";

      s.className = 'fail';

      // console.log(arguments);

    }

    if (navigator.geolocation) {

      navigator.geolocation.getCurrentPosition(success, error);

    } else {

      error('not supported');

    }

  </script>

</html>

　　

如何获取用户的地理位置？ && html5 地理位置的更多相关文章

  1. 关于html5获取用户地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  2. 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介

    如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

  3. web网站如何获取用户的地理位置

    web网站如何获取用户的地理位置 一.总结 一句话总结:通过gps知道用户的经度和纬度,然后通过经度和纬度在在地图(google或者百度)上面显示位置. 1.html5如何通过gps知道用户的经度和纬 ...

  4. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  5. 根据ip获取用户地理位置

    各大网站都提供根据ip获取用户地理位置信息,这里以新浪的接口为例子 接口地址为:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js ...

  6. PHP获取用户真实 IP , 淘宝IP接口获得ip地理位置(转)

    <?php /** * 获取用户真实 IP */ function getIP() { static $realip; if (isset($_SERVER)){ if (isset($_SER ...

  7. 手机端获取用户详细地理位置（高德地图API）

    项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 <script type="text/javascript& ...

  8. 使用纯真IP库获取用户端地理位置信息

    引言 在一些电商类或者引流类的网站中经常会有获取用户地理位置信息的需求,下面我分享一个用纯真IP库获取用户地理位置信息的方案. 正文 第一步:本文的方案是基于纯真IP库的,所以首先要去下载最新的纯真I ...

  9. js获取用户实时地理位置

    js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...

  10. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议63：避免“吃掉”异常

    建议63:避免“吃掉”异常 嵌套异常是很危险的行为,一不小心就就会将异常堆栈信息,也就是真正的Bug出处隐藏起来.这还不是最严重的,最严重的就是“吃掉”异常,即捕获,然后不向上层throw. 避免“吃 ...

  2. unittest测试框架详谈及实操(四)

    测试套件 应用unittest的Test Suite特性,可以将不同的测试组成一个逻辑组,然后设置统一的测试套来一起执行测试.通过TestSuite.TestLoader类来创建测试套件,最后用Tes ...

  3. 关于Markdown格式转PDF格式

    Markdown转PDF格式 个人使用的Markdown编辑平台:有道云笔记网页版 当我们编辑好自己的随笔以后,在网页的[客户端下载]下面有一个[更多]的圆形图标选项,点击后在菜单中有一处[打印]选项 ...

  4. [LeetCode 题解]: Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  5. [Erlang00]:gen_server:reply/2

    --- gen_server:reply/2 reply(Client, Reply) –> Result      Types:     Client - see below     Repl ...

  6. sp_helptext输出错行问题解决

    相信,大家对sp_helptext存储过程一定不陌生,它可以帮你快速获取存储过程等对象的定义.但它有一个致命的缺点就是:每行最多返回255个nvarchar类型的字符,假如有一个编写不规范的存储过程, ...

  7. Jenkins Pipeline+Maven+Gitlab持续集成构建问题集锦

    问题 1.全局配置一定要写正确,之前where git 给的地址时E:\Git\cmd\git.exe一直报错,其实Windows真正的git.exe在bin目录下 如果是Linux中,使用where ...

  8. HAOI2014 走出金字塔

    题目链接:戳我 找规律. 不过为了方便,每次我们计算入口和某一个出口之间需要花费的体力值的时候,不妨把x较小的假设成塔顶,这样的话另一个就不需要分类讨论了. 详细请看代码 #include<io ...

  9. 如何自动在Eclipse里对指定类或接口生成要覆盖的方法？

    我们经常遇到对对指定类或接口生成要覆盖的方法,但是我们不了解这些类和接口,完全手写不能保证完全正确,那么是否可以准确知道指定类或接口要被覆盖的方法,自动生成这些代码呢?是的,完全可以,按照下面步骤操作 ...

  10. flutter 保存图片到本地

    f'lutter 图片的保存 分为俩步: 1.开启存储图片权限开启权限需要用到permission_handler pubspec 添加 permission_handler: ^3.0.1下载包就可 ...