HTML5 地理位置定位API(5)
HTML5 Geolocation API (地理位置应用程序接口)
目前PC浏览器支持情况:
Firefox 3.5+
Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+
手机支持情况:
Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian (S60 3rd & 5th generation)
Blackberry OS 6
Maemo
检测浏览器是否支持:
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方法成功时调用的(必选),onError方法失败是调用的(可选),options其他参数(可选)
options:
options = {
enableHighAccuracy, //boolean 是否要求高精度的地理信息
timeout, //表示等待响应的最大时间,默认是0毫秒,表示无穷时间
maximumAge /应用程序的缓存时间
}
onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置</title>
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script> function getLocation(){
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{
//浏览器不支持geolocation
}
} //成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude; //使用百度地图API
//创建地图实例
var map =new BMap.Map("container"); //创建一个坐标
var point =new BMap.Point(longitude,latitude);
//地图初始化,设置中心点坐标和地图级别
map.centerAndZoom(point,15); } //失败时
function onError(error){
switch(error.code){
case 1:
alert("位置服务被拒绝");
break; case 2:
alert("暂时获取不到位置信息");
break; case 3:
alert("获取信息超时");
break; case 4:
alert("未知错误");
break;
} } window.onload=getLocation;
</script>
</head>
<body> <div id="container" style="width:600px;height:600px"></div>
</body>
</html>
HTML5 地理位置定位API(5)的更多相关文章
- HTML5 地理位置定位API(1)
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- HTML5 地理位置定位API(3)
HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...
- HTML5 地理位置定位API(2)
HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...
- HTML5 地理位置定位API(4)
地理定位(geolocation)是最令人兴奋,而且得到了广泛支持的一个新API.通过这套API, JavaScript代码能够访问到用户的 当前位置信息.当然,访问之前必须得到用户的明确许可,即同意 ...
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- [Javascript] HTML5 地理位置定位(HTML5 Geolocation)原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- 使用HTML5地理位置定位到城市的方法及注意事项
介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...
- html5地理位置定位功能小析
Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...
- HTML5地理定位API在chrome中不能正常使用
navigator.geolocation.getCurrentPosition在chrome中不能正常使用. 经测试发现,FQ后就能正常使用,估计是因为chrome 对这个API的实现使用了goog ...
随机推荐
- windows RabbitMQ Server 环境配置中的一些坑
原文:https://blog.csdn.net/lindonglian/article/details/55805637 RabbitMQ的服务端基于Erlang语言编写,要在机器上安装Rabbit ...
- ES6 解构赋值详解
解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...
- python 获取本机的 IP 地址,windows,linux均可
#encoding=utf-8 #参考csdn某篇文章 import socket def get_host_ip(): """ 查询本机ip地址 :return: ip ...
- zookeeper学习(3)----基本结构和命令行操作命令
一. 数据结构 https://www.jianshu.com/p/8e322462bcca zookeeper存储结构:以树形结构的方式存储数据 ZooKeeper数据模型的结构整体上可以看作是一棵 ...
- linux网络编程之socket编程(七)
今天继续学习socket编程,北京在持续几天的雾霾天之后久违的太阳终于出来了,心情也特别特别的好,于是乎,在这美好的夜晚,该干点啥事吧,那当然就是继续坚持我的程序学习喽,闲话不多说,进入正题: 通过这 ...
- virtual box启动error
启动 VirtualBox 的时候提示 “获取 VirtualBox COM 对象失败” 错误详情 “获取 VirtualBox COM 对象失败” 的错误详情: 获取 VirtualBox CO ...
- redis--基于内存的高速缓存,NoSql的典型代表
NoSql入门和概述 入门概述 为什么要使用NoSql? 1.单机mysql的美好年代 在早些年以前,那时候网站的访问量不大,用单个数据库完全可以应付.而且那个时候,绝大部分都是LAMP架构:Linu ...
- 使用jQuery快速高效制作网页交互特效---表单校验
表单基本验证技术 为什么需要表单验证 减轻服务器的压力 保证输入的数据符合要求 常用的表单验证 1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码 表单选择器 ...
- spark读文件写入mysql(scala版本)
package com.zjlantone.hive import java.util.Properties import com.zjlantone.hive.SparkOperaterHive.s ...
- SQL SERVER PIVOT使用
参照这个网址介绍 http://www.cnblogs.com/lwhkdash/archive/2012/06/26/2562979.html 一般SQL Server的函数都会识别为紫色,可是PI ...