HTML5 geolocation和BaiduMap、BingMap、GoogleMap

HTML5的地理位置定位感觉是很cool的能力，我们公司原先的定位是在android上完成的，现在我来尝试下使用HTML5的geolocation来做些事情看看。

HTML5的地理定位的采集方式：1. IP地址，2. GPS定位，3. MAC地址，4. GSM基站网络，5. 用户定义的地址位

老规矩，先简单的尝试下geolocationAPI应用

先HTML的代码，那是相当简单

[html] view plaincopy
<body>
<input type="button" value="get Geo" />
</body>
javaScript的代码如下
[javascript] view plaincopy
$(
function() {
$(":button").click(
function() {
navigator.geolocation.getCurrentPosition(
function(e) { //成功回调
$.log(e.coords.accuracy); //准确度
$.log(e.coords.latitude); //纬度
$.log(e.coords.longitude); //经度
$.log(e.coords.altitude); //海拔高度
$.log(e.coords.altitudeAccuracy); //海拔高度的精确度
$.log(e.coords.heading); //行进方向
$.log(e.coords.speed); //地面的速度
$.log(new Date(e.timestamp).toLocaleDateString());//采集日期
$.log(new Date(e.timestamp).toLocaleTimeString());//采集时间
},
function(e) { //失败回调
$.log(e.message); //错误信息
$.log(e.code); //错误代码
},
{//可选参数 JSON格式
"enableHighAcuracy": false, //是否启用高精确度模
"timeout": 100, //在指定的时间内获取位置信息
"maximumAge": 0//浏览器重新获取位置信息的时间间隔
}
);
}
);
}
);

现在你点击按钮，就可以在控制台看到经纬度和采样日期时间了。
那获得了经纬度的值，必然首先要做的就是地图定位了，现在主流的地图服务我知道的有：baidu，google，和bing，下面我来测试我们得到的经纬度在这三个地图服务中取得的地图图像吧。

baidu和bing我都查了官方的sample，但是，但是，我要狠狠的批评google，我用chrome浏览器访问googleMapApi中的sample，竟然chrome告诉我“由于 google-developers.appspot.com 响应时间过长，导致“Google Chrome 浏览器”无法加载网页。该网站可能已崩溃，或者您的互联网连接出现了问题。”google，你看着办吧。

先看看我们的body

[javascript] view plaincopy
<body>
<div>
<input type="button" value="get Geo" />
</div>
<div id="baiduMap" style="width: 300px; height: 300px; float: left;">
</div>
<div id="googleMap" style="width: 300px; height: 300px; float: left;">
</div>
<div id="bingMap" style="width: 300px; height: 300px; float: left; position: relative;">
</div>
</body>

然后引入三家的服务脚本

[javascript] view plaincopy
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>

以下是测试代码

[javascript] view plaincopy
$.log = function(msg) {
console.log(msg);
}
$(
function() {
$(":button").click(
function() {
navigator.geolocation.getCurrentPosition(
function(e) { //成功回调
$.log(e.coords.accuracy); //准确度
$.log(e.coords.latitude); //纬度
$.log(e.coords.longitude); //经度
$.log(e.coords.altitude); //海拔高度
$.log(e.coords.altitudeAccuracy); //海拔高度的精确度
$.log(e.coords.heading); //行进方向
$.log(e.coords.speed); //地面的速度
$.log(new Date(e.timestamp).toLocaleDateString()); //采集日期
$.log(new Date(e.timestamp).toLocaleTimeString()); //采集时间
createBaiduMap(e.coords.longitude, e.coords.latitude);
createBingMap(e.coords.longitude, e.coords.latitude);
createGoogleMap(e.coords.longitude, e.coords.latitude);
},
function(e) { //失败回调
$.log(e.message); //错误信息
$.log(e.code); //错误代码
},
{//可选参数 JSON格式
enableHighAcuracy: false, //是否启用高精确度模
timeout: 100, //在指定的时间内获取位置信息
maximumAge: 0//浏览器重新获取位置信息的时间间隔
}
);
}
);
}
);
function createBaiduMap(longitude, latitude) {
var map = new BMap.Map("baiduMap");
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
}
function createGoogleMap(longitude, latitude) {
var map = new google.maps.Map(document.getElementById("googleMap"),
{
center: new google.maps.LatLng(latitude, longitude),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
}
);
}
function createBingMap(longitude, latitude) {
var map = new VEMap("bingMap");
var LA = new VELatLong(latitude, longitude);
map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
}

基本代码完成后，我们看到googleMap（以后简称gm）和bingMap（以后简称mm）默认有缩放都控制器，baiduMpa（以后简称bm）没有带，现在为bm加上控制器

[javascript] view plaincopy
function createBaiduMap(longitude, latitude) {
var map = new BMap.Map("baiduMap");
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
}

为bm添加了一个NavigationControl就可以看到效果了。
现在我们想在地图上做一个标注，把我们给点的经纬度标注出来，同时我们也看看地图服务商和HTML5的定位是不是比较准，三个地图服务商的加标注代码如下

[javascript] view plaincopy
function createBaiduMap(longitude, latitude) {
var map = new BMap.Map("baiduMap");
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(point); //标注
marker.setLabel(new BMap.Label("我在这里"));
map.addOverlay(marker);
}
function createGoogleMap(longitude, latitude) {
var map = new google.maps.Map(document.getElementById("googleMap"),
{
center: new google.maps.LatLng(latitude, longitude),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
}
);
var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude),
map: map,
title: "我在这里" });
}
function createBingMap(longitude, latitude) {
var map = new VEMap("bingMap");
var LA = new VELatLong(latitude, longitude);
map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); //图钉
var myPolygon = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude, 0, VEAltitudeMode.Default));
map.AddShape(myPolygon);
myPolygon.SetTitle("我在这里");
}

如果我在移动设备上进行采集数据的话，geo提供了一个异步的API：watchPosition，这个api是异步的，文档上说：当检测到设备的位置发生改变时，它返回设备的当前位置。当设备检索到一个新的位置，会触发geolocationSuccess回调函数并传递一个Position对象作为参数。如果发生错误，会触发geolocationError回调函数并传递一个PositionError对象。不过具体我还没有测试
代码和getCurrentPosition很像的

[javascript] view plaincopy
$(
function() {
$(":button").click(
function() {
navigator.geolocation.watchPosition(
function(e) { //成功回调
$.log(e.coords.accuracy); //准确度
$.log(e.coords.latitude); //纬度
$.log(e.coords.longitude); //经度
$.log(e.coords.altitude); //海拔高度
$.log(e.coords.altitudeAccuracy); //海拔高度的精确度
$.log(e.coords.heading); //行进方向
$.log(e.coords.speed); //地面的速度
$.log(new Date(e.timestamp).toLocaleDateString()); //采集日期
$.log(new Date(e.timestamp).toLocaleTimeString()); //采集时间
createBaiduMap(e.coords.longitude, e.coords.latitude);
createBingMap(e.coords.longitude, e.coords.latitude);
createGoogleMap(e.coords.longitude, e.coords.latitude);
},
function(e) { //失败回调
$.log(e.message); //错误信息
$.log(e.code); //错误代码
},
{//可选参数 JSON格式
enableHighAcuracy: false, //是否启用高精确度模
timeout: 10, //在指定的时间内获取位置信息
maximumAge: 10, //浏览器重新获取位置信息的时间间隔
frequency: 1000//每隔3秒钟检索一次位置信息
}
);
}
);
}
);

要停止这个轮询，只要用navigator.geolocation.clearWatch就可以了。

转载于:https://blog.51cto.com/shyleoking/863993

HTML5 geolocation和BaiduMap、BingMap、GoogleMap相关推荐

HTML5 Geolocation
最近做点自己的单机小游戏,所以忽略了电子书这块,偶尔看到博友抱怨说电子书下载地址广告较多,其实自己搞到这些电子书不容易,国外网站FQ爬到的,而且需要会员制的等级下载(所以有的时候会花些钱),然后自己整 ...
HTML5 地理位置定位（HTML5 Geolocation）原理及应用（调用GPS）
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
用html设计一个时间距离查询,使用HTML5 Geolocation实现一个距离追踪器
HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...
html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
HTML5 Geolocation（地理定位）简介
HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否 ...
HTML5 Geolocation API
HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法. 1.getCurrent ...
html5获取城市,HTML5 geolocation API获得用户当前城市名
HTML5 Demo: geolocation var geocoder = null; function addAddressToMap(response) { if (!response || r ...
HTML5 地理位置定位（HTML5 Geolocation）
HTML5的强大,无需我过多的介绍,其中Geolocation地理定位是HTML5的重要特性之一.使用这个特性我们就可以开发出基于地理位置信息的应用.例如你要实现查询用户周边酒店.加油站等功能时,你可 ...

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

HTML5 geolocation和BaiduMap、BingMap、GoogleMap相关推荐

最新文章

热门文章