推断浏览器的兼容问题:

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. 精读《javascript高级程序设计》笔记一——基本概念

    语法 严格模式 启用严格模式,在脚本顶部或函数内部上方添加"use strict";语句. 数据类型 typeof typeof返回undifined,boolean,number ...

  2. threadid=1: thread exiting with uncaught exception (group=0x40db8930)

    异常信息如下: 07-26 17:23:49.521: W/dalvikvm(29229): threadid=1: thread exiting with uncaught exception (g ...

  3. javaTemplates-学习笔记三

    Routes入口 后台语言的应用入口都是从routes开始的,想要新建一个页面得学会配置routes. conf/routes 文件定义了全部应用URL的动作(Action),如果当浏览器请求访问ht ...

  4. Junit技巧

    测试套件: @RunWith(Suite.class) @Suite.SuiteClasses({TaskTest1.class, TaskTest2.class, TaskTest3.class}) ...

  5. Delphi在StatusBar上绘制ProgressBar

    首先,在TForm的私有域,也就是private下设置两个变量ProgressBar.ProgressBarRect,其中ProgressBar为 TProgressBar类型,ProgressBar ...

  6. 面向对象程序设计-C++_课时14对象组合_课时15继承

    对象组合,就是一个类的对象作为另外一个类的成员,涉及类的对象,对象是实体,玩实 继承,涉及类,类是概念,玩虚 public: 所有人都可以接触 private: 数据放private protecte ...

  7. delphi “Invalid floating point operation.”错误的解决方法

    这两天用webbrower写东西,有时候打开SSL加密站点时会出现”Invalid floating point operation.”的错误,上网搜了下,把解决方法贴上. 导致原因 在Delphi2 ...

  8. 编tuxedo遇到服务问题

    各种错误的程序报构建服务: 1.  配置为执行环境变量tmboot –y启动管理流程和服务流程 2.  每日班似这个错误:buildserv:error while loading shared li ...

  9. Phalcon 调试应用程序

    调试应用程序(Debugging Applications)¶ Phalcon中提供了提供了几种调试级别即通知,错误和异常. 异常类 Exception class 提供了发生错误时的一些经常使用的调 ...

  10. 动态加载 js

    要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...