您现在的位置： Linux教程網 >> UnixLinux > >> Linux編程 >> Linux編程

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

上一篇文章： Linux 2.6內核驅動模塊Makefile模版
下一篇文章： HTML5 rotate 做儀表盤

Linux編程

HTML5 地理位置定位（HTML5 Geolocation）

HTML5 地理位置定位（HTML5 Geolocation）原理及應用

Android網絡-GoogleMap之GPS定位

HTML5 geolocation和BaiduMap、BingMap、GoogleMap

Linux編程

SHELL編程

PERL編程