地理位置请求

单次定位请求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. [工作中的设计模式]单例模式singleton

    一.模式解析: 单例模式是最简单和最常用的设计模式,面试的时候,不管新毕业的学生还是已经工作多年的筒子,对单例模式基本都能聊上两句.单例模式主要体现在如下方面: 1.类的构造函数私有化,保证外部不能直 ...

  2. TestNg依赖配置基础用法(单一方法依赖)------TestNg依赖详解(一)

    TestNg依赖测试之简单方法依赖,通过dependsOnMethods属性来配置依赖方法 原创文章,版权所有,允许转载,标明出处:http://blog.csdn.net/wanghantong J ...

  3. linux read简单用法

    #!/bin/bash #read chars into var read -n var echo $var #read chars without showing it read -s var ec ...

  4. iOS Aspect Fit,Aspect Fill,Scale To Fill

    Scale:拉伸图片,图片变形. Aspect:图片长宽的保持比例,图片不变形. Aspect Fill(常用):图像充满容器.以长宽中小的参数为限制. Aspect Fit:图像在容器中完整显示.以 ...

  5. iSight集成Adams/View：Adams组件

    iSight本身支持特定版本的Adams/View,在Adams中添加isight的插件方法如下: 1.在iSight安装目录下搜索isight.bin文件,将其复制到Adams安装路径下的win32 ...

  6. iOS学习05C语言函数

    本次主要是学习和理解函数,函数树状图如下: 1.函数的声明和定义 函数定义的四要素分别为: 返回值类型 :函数的结果值类型,函数不能返回数组. 指定返回类型是void类型说明函数没有返回值. 函数名 ...

  7. 厉害了，摩托罗拉发布全球首款支持VR和AR的手机MotoZ

    目前支持谷歌daydream移动VR生态系统的手机型号并不多,除了谷歌自家的Pixel系列外,还有华为推出的mate9系列.如今又到了一位新成员,即升级到Android 7.0后的Moto Z. 更为 ...

  8. NOIp 2012 #2 借教室 Label：区间修改线段树

    题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...

  9. cdoj 1328 卿学姐与诡异村庄 Label:并查集 || 二分图染色

    卿学姐与诡异村庄 Time Limit: 4500/1500MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  10. UVA 11461 - Square Numbers(水题)

    题目链接 #include <cstdio> #include <cstring> #include <string> #include <cmath> ...