推断浏览器的兼容问题:

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. MySQL远程(IP)连接报错:Host 'IP地址' is not allowed to connect to this MySQL server

    ERROR 1130: Host ’192.168.1.3′ is not allowed to connect to this MySQL server这是告诉你没有权限连接指定IP的主机,下面我们 ...

  2. php配置redis支持

    在php.ini里面添加下面两行,注意这两行的顺序一定不要颠倒(扩展库下载网址https://github.com/phpredis/phpredis/downloads),同时注意这2个文件的版本一 ...

  3. C语言复杂的函数指针声明

    复习C语言ING,发现复杂的函数指针声明看不懂,百度半天终于略知一二. 讲的比较详细的一篇blog: http://blog.csdn.net/megaboy/article/details/4827 ...

  4. [问题解决] "Nautilus could not create the required folder "/home/kenneth/.config/nautilus"

    错误: "Nautilus could not create the required folder "/home/kenneth/.config/nautilus" 发 ...

  5. 基于蓝牙4.0(Bluetooth Low Energy)胎压监测方案设计

    基于一种新的蓝牙技术——蓝牙4.0(Bluetooth Low Energy)新型的胎压监测系统(TPMS)的设计方案.鉴于蓝牙4.0(Bluetooth Low Energy)的低成本.低功耗.高稳 ...

  6. (11)Xamarin.iOS - 新增iPhone storyboard

    原文 Xamarin.iOS - 新增iPhone storyboard 1. 开启Xamarin Studio 并建立新项目 专案类型为 iOS=>iPhone Storyboard => ...

  7. Android下pm 命令详解

    Sam在看相关PackageManager代码时,无意中发现Android 下提供一个pm命令,通常放在/system/bin/下.这个命令与Package有关,且非常实用.所以研究之.0. Usag ...

  8. 将String类型的数字字符转换成int

    java.lang.Integer.parseInt(String) public static int parseInt(String s) throws NumberFormatException ...

  9. javascript编辑器预览模式解密

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 走进小作坊(十一)----移动web实现指南

    四.五年前智能手机行业刚刚兴起,差别于之前功能机阉割版的web开发方式,一些学者就開始探索移动web的UI方向了.从PC迁移到移动端的web设计现成可用的原则有,很多其它的则是依据移动端独有特点进行探 ...