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就可以了。

本文转自shyleoking 51CTO博客，原文链接:http://blog.51cto.com/shyleoking/863993

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

热门文章

最新文章

相关课程

相关电子书

相关实验场景