HTML5 geolocation和BaiduMap、BingMap、GoogleMap

文章由LinuxBoy分享于2019-03-31 08:03:20热评（603）

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

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

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

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

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

<body>
<input type="button" value="get Geo" />
</body>

javaScript的代码如下

$(
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

<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>

然后引入三家的服务脚本

<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>

以下是测试代码

$.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);
}

推荐文章：

HTML5 geolocation和BaiduMap、BingMap、GoogleMap