通过window.navigator对象获取地理位置信息并在百度地图上显示

通过window.navigator对象获取地理位置信息

  • Geolocation API:用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services)

window.navigator下的geolocation 对象的 getCurrentPosition 方法可以获取当前位置。getCurrentPosition 方法将发起对位置信息的异步请求并将立即返回。如果该请求成功完成,则调用用来实现位置数据接收的成功回调。

下面演示如何调用 getCurrentPosition 并使用回调处理传入位置数据。其中successCallback是回调函数

var nav = null; 

function requestPosition() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          geoloc.getCurrentPosition(successCallback);
      }
      else {
          alert("geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}

function successCallback(position)
{
</pre><pre name="code" class="javascript">}

回调函数successCallback接受一个对象参数position,表示当前的地理位置,它有如下属性:

latitude——纬度

longitude——经度

accuracy——精确度,单位米

altitude——高度,单位米

altitudeAccuracy——高度的精确地,单位米

heading—运动的方向,相对于正北方向的角度

speed——运动的速度(假设你在地平线上运动),单位米/秒

回调函数handleLocationError接受错误对象,error.code是如下错误号。

UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。

PERMISSION_DENIED (error code 1)—— 用户选择不共享地理位置

POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置

TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数,属性如下:

enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。

timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。

maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。

下面演示如何调用百度API根据地理位置信息显示当前位置

先接入百度API 然后回调函数这样写:

function successCallback(position)
{
    setText(position.coords.latitude, "latitude");
    setText(position.coords.longitude, "longitude");
    var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

     var marker = new BMap.Marker(point);        // 创建标注
     map.addOverlay(marker);                     // 将标注添加到地图中
}

接着问题来了,发现定位跟实际位置有偏差。一查,原来是这样的:

百度坐标为何有偏移?

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

如何从其他体系的坐标迁移到百度坐标?

开发者可以使用坐标转换接口进行转换。JavaScript API 、Android
SDK、iOS SDK的开发用户可直接调用相应方法进行转换。

在用转换借口前一定一定要记得引用它转换用的JS文件

<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

转换后的回调函数:

function successCallback(position)
{
    setText(position.coords.latitude, "latitude");
    setText(position.coords.longitude, "longitude");
    var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(position.coords.longitude, position.coords.latitude);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

    translateCallback = function(Point) {
        var marker = new BMap.Marker(Point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        map.setCenter(point);
    }
    BMap.Convertor.translate(point,0,translateCallback);     //真实经纬度转成百度坐标
}
时间: 2025-01-02 16:47:51

通过window.navigator对象获取地理位置信息并在百度地图上显示的相关文章

html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位:为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象中的geolocation属性有三个方法如下: 第一个方法是:getCurrentPosition 该方法来取得

Html5 Geolocation获取地理位置信息(转)

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地

HTML5 获取地理位置信息

Geolocation API的基本知识 在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象的geolocation属性存在三个方法. 取得当前地理位置 可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下: Js代码 收藏代码 void getCurrentPosition(onSuccess, onError,

获取地理位置信息

在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象的geolocation属性存在以下三个方法. void getCurrentPosition(onSuccess,onError,options); 该方法用来获取用户当前的地理位置信息. navigator.geolocation.getCurrentPosition ( function(position)

Android 获取地理位置信息 封装好了 直接用

前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百度,不断goole,不断查找资料,终于解决了,而且完美打包,以后直接用就可以了. 1.这个类原来是用kotlin写的,后来有些东西和java又不同,索性就改成java吧,反正他们兼容性很强-----封装的类名为:LocationUtil package com.example.jason_jan.g

常用Request对象获取请求信息

Request.ServerVariables(“REMOTE_ADDR”) ‘获取访问IPRequest.ServerVariables(“LOCAL_ADDR”) ‘同上Request.ServerVariables(“SERVER_NAME”) ‘获取服务器IPRequest.ServerVariables(“HTTP_REFERER”) ‘获取访问来源页面Request.ServerVariables(“OS”) ‘获取操作系统request.ServerVariables(“APPL_

[iOS]获取地理位置信息

1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Description Privacy - Location When In Use Usage Description value里输入征求获取位置信息时展示的提示语: 2.在需要获取地理位置信息的文件中 #import <CoreLocation/CoreLocation.h> 在interfce行添加相关

调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注

前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 这个小项目分为前台和后台 前台需要两个页面,第一个页面是一打开就可以获得自己的实时位置,显示当前位置与当前的经纬度,这两项是自动获取的,还有标题和电话是可以自己添加的,点击添加,就是到达百度地图的页面,你刚刚添加的东西就会在这个地图上显示,形成一个标注,点击标注,里面显示的就是刚刚你添加的标题和电话

window.location对象获取浏览器地址栏的地址信息

获取上一个页面的一个URL,这个URL一般做一个页面的跳转 window.location.href <script>window.location.href="http://www.baidu.com"</script> 获取一个页面的主机名 window.location.hostname 获取一个页面的主机名和端口号相当于是hostname和port window.location.host 获取主机的端口号 window.location.port 获取