推断浏览器的兼容问题:

IE9+支持地理定位,FF Chrome新版支持地理定位
 if (navigator.geolocation) {

       alert('支持地理定位');

  } else {

        alert('不支持地理定位');

 }

获取自己位置经纬度
<script>

          var x=document.getElementById("wrap");

          function getLocation () {

               if (navigator.geolocation) {

                    navigator.geolocation.getCurrentPosition(showPosition);

               } else {

                    alert('不支持地理定位——HTML5自由者!');

               }

          } getLocation();



          function showPosition(position) {

               x.innerHTML ="纬度:"+position.coords.latitude + "<br />经度:"+position.coords.longitude;



          }

     </script>

处理错误和拒绝
getCurrentPosition(參数1,參数2); 方法的第二个參数用于处理错误。它规定当获取用户位置失败时执行的函数

错误代码:

  • Permission denied - 用户不同意地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

/*显示定位错误*/

          function showError(error) {

               switch(error.code) {

                    case error.POSITION_UNAVAILABLE:

                         x.innerHTML="无法获取当前位置!

"; break;

                    case error.PERMISSION_DENIED:

                         x.innerHTML="用户不同意地理定位!

"; break;

                    case error.TIMEOUT:

                         x.innerHTML="操作超时!"; break;

                    case error.UNKNOWN_ERROR:

                         x.innerHTML="未知的错误!" ; break;

               }

          }


watchPosition 用法跟getCurrenPosition方法类似 。watchPosition返回用户的当前位置,假设用户移动则返回实时位置,就跟GPS一样。

① navigator.geolocation.watchPosition(showPosition);

② clearWatch() - 停止 watchPosition() 方法




❤ 百度地图API助手   http://developer.baidu.com/map/


 /*经纬度显示在地图上*/

     function showOnMap(position){
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?

center="

       +latlon+"&zoom=14&size=400x300&sensor=false";
       document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
      }

HTML5地理定位,百度地图API,知识点熟悉的更多相关文章

  1. Html5——地理定位及地图

    常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callbac ...

  2. 微信小程序城市定位(百度地图API)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

  3. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  4. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  5. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  6. html5:地理信息 LBS基于地理的服务和百度地图API的使用

    地理位置请求 单次定位请求getCurrentPosition(请求成功函数,请求失败函数,数据收集方式) 多次定位请求watchPosition(请求成功函数,请求失败函数,数据收集方式) 关闭更新 ...

  7. 百度地图API的IP定位城市和浏览器定位(转)

    百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...

  8. 如何利用【百度地图API】进行定位?非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  9. 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置

    最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...

随机推荐

  1. 学习笔记(一) HTML+CSS基础课程

    这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...

  2. Java编程中提高性能的几点建议

    尽量减少对变量的重复计算 如 for(int i=0;i<list.size();i++) 应该改为 for(int i=0,len=list.size();i<len;i++) 并且在循 ...

  3. OpenCV学习 2:播放AVI视频

    原创文章,欢迎转载,转载请注明出处 第二个程序,播放视频.用opencv做起来是如此的简单..哈哈.           学Opencv,只是为了在它的基础上实现工程应用,而它里面高深的理论我等屌丝只 ...

  4. Html 笔记1

    标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1>这是标题</h1> 段落是通过 <p> 标签进行定义的. ...

  5. MDX笔记

    为啥要写这一篇博客:之前断断续续的学习过MDX,也大致学会了基本语法,理解了基本用法,但是用的机会不多,到了真正用的时候,无从下手,十分尴尬!故此,将语法和基本用法温故总结,结合实例将MDX做个阶段性 ...

  6. Yahoo团队经验:网站性能优化的34条黄金法则

    Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...

  7. 要不要用STL的问题——真理是越辩越明的~

    QtWidgets的维护者 Marc Mutz 有一篇博客比较详尽的介绍了 Qt自己的容器.介绍了何时用什么比较好https://marcmutz.wordpress.com/effective-qt ...

  8. Unix/Linux环境C编程入门教程(7) OPENBSDCCPP开发环境搭建

    1. 年发起了OpenBSD 专案,希望创造一个注重安全的操作系统. 2.创建一个虚拟机. 3.选择默认的workstation10.0 4.我们选择稍后安装操作系统. 5.我们选择FreeBSD64 ...

  9. iOS开发之主题皮肤

    iOS开发之主题皮肤 分类: [iOS]  最近在开发一款[公交应用],里面有个模块涉及到主题设置,这篇文章主要谈一下个人的做法. 大概的步骤如下: (1):整个应用依赖于一个主题管理器,主题管理器根 ...

  10. Spring单例与线程安全小结

    一.Spring单例模式与线程安全   Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这是在多线程开发的时候要尤其注意的地方. 单例模式的意思就是只有一个实例.单例模式确 ...