html5经纬度定位源码_基于浏览器的HTML5地理定位

地理位置(Geolocation)是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，获取浏览器经纬度，并用腾讯地图(大家可以选择自己喜欢的地图)显示出来，实现的最终效果如下图所示：

一、检测浏览器是否支持：

if (navigator.geolocation) {

//console.log("浏览器支持!");

}

else {

// console.log("浏览器不支持!");

}

二、navigator.geolocation用于获取基于浏览器的当前用户地理位置，提供了3个方法:

void getCurrentPosition(onSuccess,onError,options);

//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);

//持续获取当前用户位置

void clearWatch(watchId);

//watchId 为watchCurrentPosition返回的值

//取消监控

参数详细说明见下表：

参数

功能

返回参数

是否必选

onSuccess

方法成功时候的回调，返回position对象，通过这个对象可以获取地理位置的相关信息

Coords

返回当前位置的坐标

Coordinates

必须

Timestamp

返回获取坐标信息的时间

字符串

onError

方法失败时候的回调，返回error对象，通过这个对象返回错误类型

Code

返回代表错误类型的代码

有如下数值：

1用户未授权使用地理定位功能

2不能确定位置

3请求位置的尝试已超时

可选

message

返回描述错误的字符串

字符串

options

额外参数

enableHighAccuracy

告诉浏览器我们希望得到可能的高精度的地理信息

布尔值

可选

timeout

限制请求位置的时间,设置多少毫秒后会报告一个超时错误

数值

maximumAge

告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数

数值

三、代码实现

1、实现原理：html5地理定位 + 腾讯地图

2、实现思路：

① 判断浏览器是否支持geolocation地理定位

② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

③ 调用腾讯地图接口，将获取到的经纬度以参数形式参入腾讯地图地理坐标中，并显示到页面上

PS：也可以调用百度地图、谷歌地图、高德地图等，只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中

3、代码实现：

②核心代码：

基于浏览器的HTML5地理定位

html5经纬度定位源码_基于浏览器的HTML5地理定位相关推荐

ThinkPHP php 仿千图网源码_基于ThinkPHP5框架开发的多功能内容管理系统
会员优惠会员优惠月费会员8折.年费会员5折.永久会员免费源码介绍基于ThinkPHP5框架开发的多功能内容管理系统PHP源码,基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升 ...
idea运行jsp显示源码_基于jsp+mysql+Spring+mybatis的SSM在线个人PC电脑商城平台网站系统...
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以.IDE环境: Eclipse,Myeclipse,IDEA都可以tomcat环境: Tomcat 7.x,8. ...
halcon车牌识别完整源码_基于chineseocr_lite的身份证、火车票、车牌等中文OCR文字识别...
简介 chineseocr_lite 超轻量级中文ocr,支持竖排文字识别, 支持ncnn推理 , psenet(8.5M) + crnn(6.3M) + anglenet(1.5M) 总模型仅17M ...
springboot项目文档源码_基于SpringBoot和Vue的企业级中后台项目（附源码）
简介 SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一套整洁的代码规范,让大家在这浮躁的代码世界里感受到一股把代码写好的清流!同时又让开发者节省大量的时间,减少加班,快乐工作,热爱 ...
java招投标网站源码_基于jsp的招标系统-JavaEE实现招标系统 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的招标系统, 该项目可用各类java课程设计大作业中, 招标系统的系统架构分为前后台两部分, 最终实现在线上进行招标 ...
java婚庆网站源码_基于jsp的婚庆网站-JavaEE实现婚庆网站 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的婚庆网站, 该项目可用各类java课程设计大作业中, 婚庆网站的系统架构分为前后台两部分, 最终实现在线上进行婚庆 ...
java房产源码_基于jsp的房屋交易管理系统-JavaEE实现房屋交易管理系统 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的房屋交易管理系统, 该项目可用各类java课程设计大作业中, 房屋交易管理系统的系统架构分为前后台两部分, 最终实 ...
小说网jsp源码_基于jsp+mysql的JSP小说网
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以. IDE环境: Eclipse,Myeclipse,IDEA都可以 tomcat环境: Tomcat 7.x, ...
文件管理系统源码_基于Spring Cloud微服务构建多平台功能完善小说弹幕网站源码分享...
致力于打造一个完整的可商用.可学习的小说门户平台,重新进行了数据库设计.代码重构和功能增强,提升了程序整体的可读性和性能,增加了很多商用特性. 是一个多平台(web.安卓app.微信小程序).功能完善 ...

html5经纬度定位源码_基于浏览器的HTML5地理定位

html5经纬度定位源码_基于浏览器的HTML5地理定位相关推荐

最新文章

热门文章

html5经纬度定位 源码_基于浏览器的HTML5地理定位

html5经纬度定位 源码_基于浏览器的HTML5地理定位相关推荐

最新文章

热门文章

html5经纬度定位源码_基于浏览器的HTML5地理定位

html5经纬度定位源码_基于浏览器的HTML5地理定位相关推荐