推断浏览器的兼容问题:

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. SVN+post-commit 搭建自动同步版本库

    一.需求. 本地文件上传到测试环境svn,测试环境同步到生产环境rsync.开发环境与测试环境与生产环境分离. 二.搭建SVN服务器. yum -y install subversion && ...

  2. Moutain Tai notes

    rest 40shaxian 18 drumsticks  13零食 11.5+21车费5门票62大衣10面14 > 194.5 notes :::: 岗位职责:1.基于Drupal系统的产品功 ...

  3. codeforces 15D . Map 优先队列

    题目链接 题目意思很简单nm的矩阵里, 选若干个ab的小矩阵, 定义每个矩阵的值为这个矩阵里的所有数的和-最小值*数的个数. 选小矩阵时, 优先选值最小的,然后次小的.. 知道不能选位置. 输出所有矩 ...

  4. vb listview 的常用操作

    常用操作:获取当前行数和列数: MsgBox "行数:" & ListView1.ListItems.Count & "列数:" & L ...

  5. 复习-C语言内嵌汇编-初级(1)

    打印hello world并改变变量i的值 # include <stdio.h> int main() { ; __asm__( "mov %0, #4\n" :&q ...

  6. RobotFramework环境搭建

    环境搭建 1. 准备条件 python-2.7.7 https://www.python.org/download/releases/2.7.7/ wxPython2.8-win32-unicode- ...

  7. ODI性能问题

        在这里分析下最近分析和解决ODI性能问题的点滴,用作参考.在介入该问题前,已经具备的基础知识包括了ODI基础,SOA理论和实施,特别是04年封闭四天的informatic ETL培训和实操.几 ...

  8. 对web应用中单一入口模式的理解及php实现

    在我们web应用的开发中,经常会听见或看见单一入口模式,在我开始学习tp框架的时候也不理解为什么要运用一个单一入口模式,只是会使用,最近自己在搞一个小东西的时候才明白为什么在web开发中要运用单一入口 ...

  9. 奇怪的haproxy 跳转

    <pre name="code" class="html">奇怪的Haproxy 跳转: acl admin_req path_beg -i /ad ...

  10. mongoose 查询子文档的方法

    { "__v": 1, "_id": "538f5f0f6195a184108c8bd8", "title": &quo ...