精华内容
下载资源
问答
  • HTML5地理位置定位API接口开发

    千次阅读 2017-02-12 14:22:54
    地理位置定位原理介绍 地理位置的定位目前有如下几种方式:GPS,IP地址,Wifi(国内基本不用),GSM/CDMA基站的方式。  HTML5地理位置定位的实现:  1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术。 ...

    一. 地理位置定位原理介绍

      地理位置的定位目前有如下几种方式:GPS,IP地址,Wifi(国内基本不用),GSM/CDMA基站的方式。
      HTML5地理位置定位的实现:
      1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术。
      2. 精确定位用于的地理位置(精度最高达10米之内,依赖设备)。
      3. 可持续追踪用户的地理位置
      4. 与Google Map , Baidu Map 交互呈现地理位置。

    二. HTML5地理位置定位的方法

    1. 关于Geolocation对象

    Geolocation API 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户当前的地理位置时,浏览器会提示用户是否允许or拒绝。

    2. 在进行开发之前,首先测试你的浏览器是否支持Geolocation API ,判断方法如下:

        if(navigator.geolocation){
            alert("你的浏览器支持Geolocation API");
        }else{
            alert("你的浏览器不支持Geolocation API");
        }

    3.Geolocation API存在于navigator对象中,只包含3个办法:

    1. getCurrentPosition //获取当前位置,只能获取一次,除非再次打开web应用。
    2. watchPosition //实时监视位置
    3. clearWatch //清除监视

    其中,getCurrentPosition(success,error,option)方法最多可以有三个参数:
    第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数
    第二个参数用于捕获获取位置信息出错的情况
    第三个参数是配置项


    下面是实例验证

    先看代码和效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style type="text/css">
            #dituContent{
                width: 700px;
                height: 400px;
                border: 2px solid #0ff;
            }
        </style>
    </head>
    <!-- 调用百度地图的js 这是1.4版本的写法,现在都用2.0以上的版本,但是必须申请秘钥-->
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=z3XqRG4rBkY9muyAl4QT0YUDgrx36C74"></script>
    <body>
    <div id="dituContent">  
    </div>
    <script type="text/javascript">
        if(navigator.geolocation){
            // alert("您的浏览器支持地理定位")
            navigator.geolocation.getCurrentPosition(function(p){
                var latitude=p.coords.latitude;
                var longitude=p.coords.longitude;
                // alert("纬度"+latitude+"经度"+longitude);
                createMap(latitude,longitude);
                // alert(1);
            },function(e){
    
            });
        }else{
            alert("您的浏览器不支持地理定位")
        }
    // <!-- 把我们获取到的经纬度传给百度地图来给我显示位置 -->
        function createMap(a,b){
            var map = new BMap.Map("dituContent");//其中dituContent是一个div容器的id,以便地图显示在那里。
            var point =  new BMap.Point(b,a);//注意此时经纬度是逆着的,更加经纬度定义一个中心点。
            map.centerAndZoom(point,10); //设定围绕这个中心点的范围,20是最大
            window.map=map; //将map变量存储在全局。
        }
    </script>
    </body>
    </html>

    这里写图片描述


    总结:代码解释都放在了注释中,我们通过HTML5获取当前位置的坐标,然后根据坐标数据把它发送给百度地图或谷歌地图的服务器,让他们根据我们提供的坐标给我们显示位置。

    百度地图开发API链接
    注意:由于百度地图的升级,目前我们调用的是百度地图2.0以上的版本,而在这个版本中我们需要申请秘钥。
    如何获取秘钥?请点击链接如何获取百度地图API接口的秘钥

    展开全文
  • HTML5地理位置定位 lbs

    千次阅读 2015-08-09 21:29:29
    HTML5 地理位置定位 LBS Geolocation

    地理位置定位(Geolocation)

    一、介绍

    地理位置(Geolocation)是HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,使得开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能,具有划时代的意义!

     

    二、浏览器支持情况

     


    三、定位基本原理

       

    1.GPS定位

    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备。

    优点:在空旷地区比较准确,覆盖面比较广

    缺点:需要比较长时间定位,比较耗电池,在室内不太好,需要GPS设备支持。

     

    2.WIFI定位

        地理定位服务提供者会在全世界范围内去收集WIFI热点的位置信息,然后用户的设备只要能支持WIFI就能获取到周围WIFI热点的位置和信号强弱信息,然后把这些信息发给服务提供者就能得到自己的位置。

    优点:比较准确,适用于室内环境,响应速度快

    缺点:在wifi热点少的地方不适用

     

    3.IP定位

    原理很简单,就是通过你设备的物理地址所备案的地址信息来定位,但这种方式精确度不高,特别是用代理来上网的情况下。一般作为GPS和WIFI都不支持的情况下大致模糊匹配,比如各大团购网站检测用户所在城市。

     

    4.手机基站定位(GSM/CDMA)

    和WIFI原理类似,Apple的设备就是把WIFI和基站信息结合起来进行定位。

     

     

    四、地理位置获取流程

    1、用户打开需要获取地理位置的web应用。

    2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。

    3、假设用户允许或浏览器默认允许,浏览器从设备查询相关信息。

    4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

     

    五、核心实现

    实现基于浏览器(无需后端支持)获取用户的地理位置技术,可以精确定位用户的地理位置(精度最高达10m之内,依赖设备),并且可以持续追踪用户的地理位置,还可以与GoogleMap、BaiduMap交互实现地理位置信息的可视化呈现。

     

       1.geolocation对象以及getCurrentLocation()方法

    在支持HTML5的浏览器中,为JavaScript中window对象的navigator对象增加了一个对象属性即geolocation对象。该对象提供了实现地理位置定位的接口,其实就是将用户当前位置发送给一些位置服务提供商的服务器,从而获取位置信息。要使用该功能就首先要判断浏览器是否支持该对象,即访问window.navigator.geolocation如果不是undefined则表示浏览器支持定位,也可以省略window。

    例如:

    alert(navigator.geolocation);   //结果为[object Geolocation],就表示该浏览器支持HTML5的定位

     

    geolocation对象提供了getCurrentPosition(success,error,options)方法用来获取当前用户的位置信息,该方法就会让浏览器去从一些位置服务提供商哪里获取当前的位置。success是获取成功后的回调函数,error是获取失败的回调函数,options是一个对象表示为该方法传递的一些设置参数,例如延时获取等。其中获取成功后会将一个参数传递给回调函数,通过该函数就可以得到定位的一些信息了,例如经纬度等。

     

    2.success回调函数

    例如获取当前的经纬度:

    function success(position){

          /*position就是定位成功后包含位置信息的对象*/

          var latitude=position.coords.latitude//获取纬度

          var longgitude=position.coords.longitude//获取经度

          alert("纬度:"+latitude+"\n经度:"+longgitude);

       }

      

       function error(){

          alert("获取失败");

       }

      

       var options={};

      

       if(navigator.geolocation){

          navigator.geolocation.getCurrentPosition(success,error,options);

       }else{

          alert("浏览器不支持定位");

       }

     

    success回调函数的position参数更多的属性如下:

    Ø  coords.latitude(纬度)

    Ø  coords.longitude(经度)

    Ø  coords.altitude(海拔)

    Ø  coords.accuracy(位置精确度,准确角)

    Ø  coords.altitudeAccuracy(海拔精确度)

    Ø  coords.heading(朝向)

    Ø  coords.speed(速度)

    Ø  timestamp(响应的日期/时间)

     

    position对象除了coords对象属性外,还有address对象属性,可以获取地理位置的文字描述,例如城市,但address浏览器支持的并不好,貌似之后火狐支持:

    position.address.city;  获取城市名称

    postion.address.region;  获取省份名称

    position.country;  获取国家名称

     

    其中在PC端可以获取到经度和纬度,城市名称等,后面的海拔、朝向等定位属性是无法获取的,都会得到undefined或null,因为这些需要移动设备中相关硬件的支持,例如GPS、陀螺仪等。

    其实这种获取位置的原理就是获取所使用的服务提供商当前的网络出口mac地址所对应的位置。例如每个大楼可能会有一个公共的网络出口,这个出口的mac地址以及地理位置就被收录在位置服务提供上的服务器上,此时获取的其实就是这个公共出口的位置

     

    4.error回调函数

    获取失败时也会传递一个参数给获取失败的回调函数,例如:functionerror(errorObj){…} 这个错误对象参数主要包含了code和message两个属。code是错误码,对应于具体的错误类型,message是本次出现错误的提示信息,由浏览器设置。例如:

    function error(errorObj){

          switch(errorObj.code){

             case 1 : alert(errorObj.message); break//用户选了不允许

             case 2: alert(errorObj.message); break//连不上GPS卫星,或者网络断了

             case 3: alert(errorObj.message); break;//超时了

             default: alert(errorObj.message); break;  //未知错误,其实是err.code==0的时候

          }

    }

     

    具体的errorCode值如下:

    errorObj.TIMEOUT:连接超时

    errorObj. PERMISSION_DENIED :用户或浏览器拒绝共享位置信息

    errorObj. POSITION_UNAVAILABLE :无法为当前位置提供位置信息,即不支持当前位置。

     

     

    5.options选项

    第三个参数options是一个对象,可以设置超时时间、缓存时间等,如下:

    Ø  enableHighAccuracy表示是否允许使用高精度。它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的GPS 和WIFI,值为true 的时候,浏览器会尝试启用这些设备,默认指为 true。但这个参数在很多设备和系统上设置了都没用,设备或操作系统会综合考虑电量、地理情况等,很多时候都是默认的由设备自身来调整。

    Ø  timeout指定超时时间,如果在该时间内获取不到信息就放弃,此时将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。然后在超时处理函数中并且捕获到该错误代码后,我们可以调整传递给getCurrentPosition()的参数,可以试图重新获取

    Ø  maximumAge设置缓存时间,即在该时间范围内不重新获取位置,例如手机导航就需要将这个时间设置的非常短,因为设备在不停的移动所以需要及时获取而不是使用缓存。

     

     

    六、geolocation的其他方法

    1.watchPosition(success,error,options)

     表示重复获取地理位置,相当于将getCurrentPosition这个方法利用setinterval不断执行,其他用法和参数使用一样。

    2.clearWatch()

    用来清除前一次获取的位置信息。这个两个方法配合使用,能够实现一些很棒的功能,比如说:导航等!

     

    例如在手机中因为会不停的改变位置,所以需要不停的获取当前位置。获取当前位置之后使用clearWatch()清楚当前位置时候紧接着再次获取即可。watchPosition与clearWatch有点像setInterval和clearInterval。

     

     

    七、地图标注

    当前获取了用户的当前位置之后一般需要现实一个地图并标注用户在地图中的位置,此时就需要使用百度地图、高德地图或谷歌地图等支持了。例如百度地图可以搜索“百度地图api”来获取帮助,其中有JavaScriptAPI就是为浏览器使用定位而提供的接口。这些API也根据需求不同而提供不同的功能,可以根据需要选项合适的接口调用,例如有:

     

      

      在百度地图API中,点击上面的每种定位服务,就会看到相应的JS代码实例。这里以使用当前经纬度定位方式并在周围搜索关键词然后展示在地图上的方式来演示:

       

    1.引入百度地图API的js,其中要包含个人申请的密钥(ak)

    <script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0

    &ak=ESCn86HSWEVj5BNsc97UbDVv"></script>

       

    2.定义要现实结果的html容器,并设置id:<divid="i-map"></div>

       

    3.通过geolocation的getCurrentLocation方法获取当前位置的经纬度,然后在附近搜索。success方法

    function success(position){

          var latitude=position.coords.latitude;  //获取纬度

          var longgitude=position.coords.longitude;  //获取经度

          var map = new BMap.Map("i-map");            // 创建Map实例

            //注意经纬度的顺序

          map.centerAndZoom(new BMap.Point(longgitude, latitude), 11); //11表示默认的缩放

          map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

          map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

          var local = new BMap.LocalSearch(map, {

             renderOptions: {map: map, panel: "r-result"}   //r-result是用于现实类似可选结果

          });

          local.search("海底捞");

       }

    展开全文
  • android webview里HTML5的地理位置定位

    千次阅读 2016-10-20 11:23:22
    //启用数据库 webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath...//启用地理定位 webSettings.setGeolocationEnabled(true);
    //启用数据库  
    webSettings.setDatabaseEnabled(true);    
    String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath(); 
    
    //启用地理定位  
    webSettings.setGeolocationEnabled(true);  
    //设置定位的数据库路径  
    webSettings.setGeolocationDatabasePath(dir);   
    
    //最重要的方法,一定要设置,这就是出不来的主要原因
    
    webSettings.setDomStorageEnabled(true)  
    
    //配置权限(同样在WebChromeClient中实现)  
    public void onGeolocationPermissionsShowPrompt(String origin,   
                   GeolocationPermissions.Callback callback) {  
        callback.invoke(origin, true, false);  
        super.onGeolocationPermissionsShowPrompt(origin, callback);  
    } 
    配置权限:
    
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    展开全文
  • HTML或JavaScript有没有可以实现定位的好的方法?
  • 讲一下定位手机app上元素时定位父节点、兄弟节点的方法 这里就讲这两种了,也是比较常用的两种方法,其他的方法大家查看博客的其他章节 实例: 我们现在要定位到RelativeLayout[0,1285][1080,1465]下的...

    讲一下定位手机app上元素时定位父节点、兄弟节点的方法

     

    这里就讲这两种了,也是比较常用的两种方法,其他的方法大家查看博客的其他章节

     

    实例:

     

    我们现在要定位到RelativeLayout[0,1285][1080,1465]下的LinearLayout下的第二个元素

     

    一、通过兄弟节点来定位

     

    使用方法:

    following-sibling:: 找到当前节点的后面一个节点,也就是弟弟节点

    preceding-sibling:: 找到当前节点的前面的一个节点,也就是哥哥节点

     

    这里我使用这句来找我们需要定位的那个元素:

    Xpaht= //android.widdget.TextView[@text=”年化收益率(历史)”]/following-sibling::android.widget.RelativeLayout/android.widget.LinearLayout[0]/android.widget.LinearLayout[1]


    二、通过父节点来定位

     

    使用方法:

    Parent:: 或者 .. 找到当前节点的父节点

     

    这里使用父节点的方法来定位我们需要找的那个元素:

    Xpath=//android.widget.TextView[@text=”年化收益率(历史)”]/parent::android.widget.LinearLayout/android.widget.RelativeLayout/android.widget.LinearLayout[0]/android.widget.LinearLayout[1]

    最后的那句可以用..来代替parent::

    展开全文
  • 获取地理位置定位信息-app端

    千次阅读 2019-07-18 14:21:08
    获取地理位置定位信息-app端 getLoad() { let site = {} let onSuccess = (position) => { site.code = 0 //获取经纬度 site.position = [position.coords.longitude, position.coords.latitude]...
  • Android中WebView控件支持地理位置定位

    万次阅读 2015-12-21 13:51:38
    Android WebView从assets中加载html5页面,实现地理位置定位,有需要的朋友可以参考下。 今天调研一个html5页面的定位问题,发现在手机浏览器上html5是可以实现定位的,但是在webview中就无法定位了。而我居然...
  • 这篇文章主要是对百度地图进行定位当前的位置,同时在当前位置设置圆形覆盖物,后面会实现附近餐馆查找功能。文章比较基础,包括申请API Key、配置环境、官方文档介绍、使用BDLocationListener实现定位监听方法等,...
  • 关闭微信小程序电脑端的位置定位

    千次阅读 2020-12-30 17:40:38
    关闭微信小程序电脑端的位置定位关闭微信小程序电脑端的位置定位1、使用fiddler获取微信小程序获取定位的网址2、在host文件中将其禁止3、删除微信小程序的缓存3、再启动微信小程序即可 关闭微信小程序电脑端的位置...
  • 目前在做公司的一个网站,有个需求是:当别人进入网站时自动定位他的地理位置,包括市区,方便给他推荐当前城市的特色信息。 其实,这也是一个非常实用的功能,在网上搜到很多,有的不能用,现将我整理的两个能用的...
  • OpenStreetMap + Leaflet 当前位置定位

    千次阅读 2019-08-15 17:03:30
    想用Leaflet在OpenStreetMap上面使用位置定位 我使用了leaflet-locatecontrol插件 实现效果 github 地址:https://github.com/domoritz/leaflet-locatecontrol Html <head>里面: <!-- 添加Leaflet...
  • HTML5 地理位置定位 API 接口开发

    万次阅读 2013-09-10 10:40:37
    地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA 地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设...
  • 微信开发 - 获取用户地理位置定位

    万次阅读 2017-04-24 14:28:54
    那么,我们怎么去获取用户的地理位置定位呢?  可以采用百度地图接口获取用户的地理位置定位。要使用该服务,你得先注册成为百度地图开发者。http://lbsyun.baidu.com/ 百度地图开放平台地址  注册成为开发者后...
  • 一、位置position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】 1.static:元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或者多个行...
  • 1. 用手机打开高德地图APP软件,看到那个地图上有个圆圈中间有个蓝色显示自己所处的位置,点击蓝色的图标手机底部会有个“我的位置”后面有蓝色“详情”再点击它;2. 进入我的位置,里面有自己所在位置的详细地点,...
  • 定位当前地理位置

    万次阅读 2018-05-02 10:57:40
    根据用户的地理位置提供相关地区服务,已经是非常普遍的一项功能,例如本地生活类网站、外卖网站等。HTML5新功能中提供了获取用户位置的能力,使用HTML5 Geolocation API来构建基于地理位置的应用。Geolocation API...
  • H5定位功能及地理位置获取

    千次阅读 2020-11-30 12:34:36
    通过百度API实现定位功能: var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var mk = new BMap.Marker(r.point); ...
  • webview=(WebView) findViewById(R.id.webview); webview.getSettings()....在uc和原版浏览器中可以实现定位,在自己的webview中就没法实现 在csdn和百度上查到的资料都差不多 还是没法解决 求各位大大帮忙.
  • 微信小程序获取当前位置 地图定位导航-详细代码

    万次阅读 多人点赞 2019-05-12 12:04:16
    小程序获取当前位置,回到当前位置,地图定位,导航 效果 因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段 ...
  • 地图实时定位我的位置

    千次阅读 2018-11-11 16:59:00
    首先需要显示地图,请看我的另一篇文章 ...然后启动定位功能标记我的位置 开启定位图层 setMyLocationEnabled(true) 构造定位数据 MyLocationData对象 设置定位数据,并配置定位图层的信息 关闭定位图...
  • Android的定位策略

    千次阅读 2016-06-17 18:15:48
    为android开发地理位置相关的应用程序,你可以利用GPS或者android的网络定位数据源来获取用户的地理位置。尽管GPS的定位更加精准,但它只适用于户外,并且还会更快的消耗电量,它也不能按用户所期待的及时返回地理...
  • 室内定位传感器方案汇总 目录 室内定位传感器方案汇总 1、定位方案概述 1.1、内定位系统有最基本的5种算法: 1.2、常用的室内定位技术主要包括以下几种: 1.3、定位理论 1.4、不同的定位方案对比 2、各种...
  • 地图定位--制作公司地图位置

    千次阅读 2020-06-05 14:49:52
    一、制作地图位置步骤 1、首先打开制作地图的网站:http://api.map.baidu.com/lbsapi/createmap/index.html 2、填写内容 定位为公司地址 放置标志 标记名称为公司名称 备注为:公司联系号码及联系人 然后点击获取...
  • android中webview支持位置定位

    千次阅读 2014-10-11 15:14:49
    支持位置定位 WebView webView = (WebView)findViewById(R.id.webview); WebSettings webSettings = webView.getSettings(); //webview 支持 js 脚本 webSettings.setJavaScriptEnabled(true); ...
  • 地理位置定位方式

    千次阅读 2014-11-03 11:49:44
    在移动终端,LBS大行其道,能同时给用户和商家带来极大的便利,但前提是能够取到用户当前的地理位置。本文总结的是取到用户所处位置的方法,为后续的实现提供参考。 移动终端最大的优势在于便携、个人属性强。也...
  • 请在application标签中声明service组件,每个app拥有自己单独的定位service。 Java &lt;service android:name="com.amap.api.location.APSService"&gt;&lt;/service&gt; 然后,声明...
  • H5 元素相对定位后不占位置

    千次阅读 2019-05-28 00:30:00
    实现原理:position:absolute(子级)和 position: relative(父级)配合使用 ,就可以实现相对定位后不占位置。 在你想要相对定位的元素外面套上盒子使用相对定位 position: relative; 然后里面使用 position:...
  • 地理位置定位方法

    千次阅读 2016-10-18 16:06:47
    一、基于原生html5的地理位置定位 缺点:基于http的请求不支持ios10,IOS10要求必须要https,下面三种都兼容IOS10系统,该经纬度是基于GPS,WLAN和基站的综合因素而获得的,在使用百度地图展示时需要把该经纬度用百度...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 889,114
精华内容 355,645
关键字:

位置定位

友情链接: Xilium.CefGlue+手册.zip