HTML5 geolocation和BaiduMap、BingMap、GoogleMap

2025-02-14 技术教程

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

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

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

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

[html]viewplaincopy<body><inputtype="button"value="getGeo"/></body>javaScript的代码如下[javascript]viewplaincopy$(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(newDate(e.timestamp).toLocaleDateString());//采集日期$.log(newDate(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]viewplaincopy<body><div><inputtype="button"value="getGeo"/></div><divid="baiduMap"style="width:300px;height:300px;float:left;"></div><divid="googleMap"style="width:300px;height:300px;float:left;"></div><divid="bingMap"style="width:300px;height:300px;float:left;position:relative;"></div></body>

然后引入三家的服务脚本

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

以下是测试代码

[javascript]viewplaincopy$.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(newDate(e.timestamp).toLocaleDateString());//采集日期$.log(newDate(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//浏览器重新获取位置信息的时间间隔});});});functioncreateBaiduMap(longitude,latitude){varmap=newBMap.Map("baiduMap");varpoint=newBMap.Point(longitude,latitude);map.centerAndZoom(point,15);}functioncreateGoogleMap(longitude,latitude){varmap=newgoogle.maps.Map(document.getElementById("googleMap"),{center:newgoogle.maps.LatLng(latitude,longitude),zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP,mapTypeControl:false,navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}});}functioncreateBingMap(longitude,latitude){varmap=newVEMap("bingMap");varLA=newVELatLong(latitude,longitude);map.LoadMap(LA,14,VEMapStyle.Road,false,VEMapMode.Mode2D,true,1);}

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

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

[javascript]viewplaincopyfunctioncreateBaiduMap(longitude,latitude){varmap=newBMap.Map("baiduMap");varpoint=newBMap.Point(longitude,latitude);map.centerAndZoom(point,15);map.addControl(newBMap.NavigationControl());varmarker=newBMap.Marker(point);//标注marker.setLabel(newBMap.Label("我在这里"));map.addOverlay(marker);}functioncreateGoogleMap(longitude,latitude){varmap=newgoogle.maps.Map(document.getElementById("googleMap"),{center:newgoogle.maps.LatLng(latitude,longitude),zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP,mapTypeControl:false,navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}});varmarker=newgoogle.maps.Marker({position:newgoogle.maps.LatLng(latitude,longitude),map:map,title:"我在这里"});}functioncreateBingMap(longitude,latitude){varmap=newVEMap("bingMap");varLA=newVELatLong(latitude,longitude);map.LoadMap(LA,14,VEMapStyle.Road,false,VEMapMode.Mode2D,true,1);//图钉varmyPolygon=newVEShape(VEShapeType.Pushpin,newVELatLong(latitude,longitude,0,VEAltitudeMode.Default));map.AddShape(myPolygon);myPolygon.SetTitle("我在这里");}

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

[javascript]viewplaincopy$(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(newDate(e.timestamp).toLocaleDateString());//采集日期$.log(newDate(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就可以了。