地理位置请求

单次定位请求getCurrentPosition(请求成功函数，请求失败函数，数据收集方式)

多次定位请求watchPosition(请求成功函数，请求失败函数，数据收集方式)

关闭更新请求clearWatch ，类似js中的定时器

navigator.geolocation

单次定位请求  ：getCurrentPosition(请求成功，请求失败，数据收集方式)

    请求成功函数function(position)

        经度 :  position.coords.longitude

        纬度 :  position.coords.latitude

        准确度 :  position.coords.accuracy

        海拔 :  position.coords.altitude

        海拔准确度 :  position.coords.altitudeAcuracy

        行进方向 :  position.coords.heading

        地面速度 :  position.coords.speed

        时间戳 : new Date(position.timestamp)

     请求失败函数function(err)

        失败编号  ：code

        0  :  不包括其他错误编号中的错误

        1  :  用户拒绝浏览器获取位置信息

        2  :  尝试获取用户信息，但失败了

        3  :   设置了timeout值，获取位置超时了

    数据收集 :  json的形式

        enableHighAcuracy  :  更精确的查找，默认false

        timeout  :  获取位置允许最长时间，默认infinity

        maximumAge :  位置可以缓存的最大时间，默认0

多次定位请求  :  watchPosition(像setInterval)

        移动设备有用，位置改变才会触发

        配置参数：frequency 更新的频率

关闭更新请求  :  clearWatch(像clearInterval)

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

//LBS : 基于地图信息的应用

window.onload = function(){

	var oInput = document.getElementById('input1');

	var oT = document.getElementById('t1');

	var timer = null;

	oInput.onclick = function(){

                //一般移动端，手机位置换动。//换成单次试一试getCurrentPosition

		timer = navigator.geolocation.watchPosition(function(position){

			oT.value += '经度:' + position.coords.longitude+'\n';

			oT.value += '纬度 :' + position.coords.latitude+'\n';

			oT.value += '准确度 :' + position.coords.accuracy+'\n';

			oT.value += '海拔 :' + position.coords.altitude+'\n';

			oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';

			oT.value += '行进方向 :' + position.coords.heading+'\n';

			oT.value += '地面速度 :' + position.coords.speed+'\n';

			oT.value += '时间戳:' + new Date(position.timestamp)+'\n';

		},function(err){

			//err.code // 失败所对应的编号

			alert( err.code );

			navigator.geolocation.clearWatch(timer);

		},{

			enableHighAcuracy : true,

			timeout : 5000,

			maximumAge : 5000,

			frequency : 1000

		});

	};

};

</script>

</head>

<body>

<input type="button" value="请求" id="input1" /><br />

<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">

</textarea>

</body>

</html>

结果

百度地图API的使用

地址

http://lbsyun.baidu.com/,http://lbsyun.baidu.com/index.php?title=jspopular找实例

百度地图apidemo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#div1{ width:400px; height:400px; border:1px #000 solid;}

</style>

<script src="http://api.map.baidu.com/api?v=1.3"></script>

<script>

window.onload = function(){

	var oInput = document.getElementById('input1');

	oInput.onclick = function(){

		navigator.geolocation.getCurrentPosition(function(position){

			var y = position.coords.longitude;

			var x = position.coords.latitude;

			var map = new BMap.Map("div1");

			var pt = new BMap.Point(y, x);

			map.centerAndZoom(pt, 14);

			map.enableScrollWheelZoom();

			var myIcon = new BMap.Icon("by.png", new BMap.Size(30,30));

			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注

			map.addOverlay(marker2); 

			var opts = {

			  width : 200,     // 信息窗口宽度

			  height: 60,     // 信息窗口高度

			  title : "by标题"  // 信息窗口标题

			}

			var infoWindow = new BMap.InfoWindow("软硬件公司", opts);  // 创建信息窗口对象

			map.openInfoWindow(infoWindow,pt); //开启信息窗口

		});

	};

};

</script>

</head>

<body>

<input type="button" value="请求" id="input1" />

<div id="div1"></div>

</body>

</html>

结果

当然还有很多api，如滚轮缩放，3d图，热力图，自己再改一改，就快实现了。最主要先知道最基本的吧。

html5:地理信息 LBS基于地理的服务和百度地图API的使用的更多相关文章

  1. LBS 基于位置的服务

    LBS (Location Based Services)基于位置的服务 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网.CDMA网)或外部定位方式(如GPS)获取移动终端用户的位 ...

  2. 【百度地图API】如何制作班级地理通讯录？LBS通讯录

    原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...

  3. HTML5地理定位，百度地图API，知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  4. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  5. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  6. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

  7. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

  8. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  9. 基于百度地图api + AngularJS 的入门地图

    转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...

随机推荐

  1. zookeeper + LevelDB + ActiveMQ实现消息队列高可用

    通过集群实现消息队列高可用. 消息队列在项目中存储订单.邮件通知.数据分发等重要信息,故对消息队列稳定可用性有高要求. 现在通过zookeeper选取activemq leader的形式实现当某个ac ...

  2. PHP 垃圾回收机制

    PHP垃圾回收说到底是对变量及其所关联内存对象的操作, 所以在讨论PHP的垃圾回收机制之前,先简要介绍PHP中变量及其内存对象的内部表示(其C源代码中的表示). PHP官方文档中将PHP中的变量划分为 ...

  3. Rectangle(csu)

    Description Now ,there are some rectangles. The area of these rectangles is 1* x or 2 * x ,and now y ...

  4. BZOJ3740 : pku2842 N-dimension Matching N维匹配

    做$n$次递推求出$n$维Hash值即可,时间复杂度$O(nk)$. #include<cstdio> #define N 500010 int n,i,j,t,delta,ca,cb,a ...

  5. 2016年AR行业十大热点事件汇总

    2016年即将接近尾声,增强现实在今年完成了里程碑式的跃进.无论是从新玩法的开发还是从大众接受度,以及行业巨头的青睐,无不证明这AR的无线潜力,故而,2016年算是AR的崛起之年. 纵观全年AR新闻事 ...

  6. background-attachment 定义背景图片随滚动轴的移动方式

  7. ACM: 还是畅通工程-并查集-最小生成树-解题报

    还是畅通工程 Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 某省调查乡村交通 ...

  8. [题解+总结]动态规划大合集II

    1.前言 大合集总共14道题,出自江哥之手(这就没什么好戏了),做得让人花枝乱颤.虽说大部分是NOIP难度,也有简单的几道题目,但是还是做的很辛苦,有几道题几乎没思路,下面一道道边看边分析一下. 2. ...

  9. 【CodeVS】 p1225 八数码难题

    题目描述 Description Yours和zero在研究A*启发式算法.拿到一道经典的A*问题,但是他们不会做,请你帮他们.问题描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字 ...

  10. iOS 评论APP撰写评论

    ---- iOS 应用评分 UIAlertAction *alertAction1 = [UIAlertAction actionWithTitle:@"方式1 跳转到app商店" ...