JS文件中定義一下函數,在html頁面中調用loadPosition()函數就可直接進行執行。
入口函數:
functionloadPosition() {
if (navigator.geolocation) {
//alert("HTML5 Geolocation is supported in your browser.");檢測瀏覽器是否支持定位
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, { timeout: 50000, maximumAge: 20000 });
}
else {
alert("HTML5 Geolocation is not supported in your browser.");
}
}
調用成功後的回調函數
functionupdateLocation(position) {
var latitude = position.coords.latitude;//緯度
var longitude = position.coords.longitude;//經度
// var accuracy = position.coords.accuracy;定位精度
// var timestamp = position.timestamp;
// alert("獲取的GPS座標經度:"+longitude+"。緯度:"+latitude);
var gpsPoint = new BMap.Point(longitude, latitude);
BMap.Convertor.translate(gpsPoint, 0, translateCallback); //調用百度接口將GPS座標轉換成百度座標
}
調用失敗後的回調函數
functionhandleLocationError(error) {
switch (error.code) {
case 0:
alert("There was an error while retrieving your location: " + error.message);
break;
case 1:
alert("The user prevented this page from retrieving a location.");
break;
case 2:
alert("The browser was unable to determine your location: " + error.message);
break;
case 3:
alert("The browser timed out before retrieving the location.");
break;
}
}
//座標轉換完之後的回調函數
translateCallback = function (point) {
$("#longitude").val(point.lng);
$("#latitude").val(point.lat);
alert("轉化爲百度座標爲經度:" + point.lng + "。緯度:" + point.lat);
}
調用座標轉換函數時要用到以下兩個js文件,將其製成js文件包含進去就可以。我做項目時用的是mvc框架,直接將下面兩個js文件丟到Scripts文件夾,然後在用到這兩個文件的頁面用@Scripts.Render("~/scripts/api.map.baidu.js")
@Scripts.Render("~/scripts/convertor.js")//以上兩個js文件名是自己隨便起的
包含進去就可以
api.map.baidu.js
(function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('
|
convertor.js
//2011-7-25 (function(){ //閉包 function load_script(xyUrl, callback){ var head = document.getElementsByTagName_r('head')[0]; var script = document_createElement_x_x('script'); script.type = 'text/javascript'; script.src = xyUrl; //借鑑了jQuery的script跨域方法 script.onload = script.onreadystatechange = function(){ if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; if ( head && script.parentNode ) { head.removeChild( script ); } } }; // Use insertBefore instead of a to circumvent an IE6 bug. head.insertBefore( script, head.firstChild ); } function translate(point,type,callback){ var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //隨機函數名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; //動態創建script標籤 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult){ delete BMap.Convertor[callbackName]; //調用完需要刪除改函數 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } }
window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();
|