HTML5提供了地理位置定位功能（Geolocation API），能確定用戶位置，我們可以借助HTML5的該特性開發(fā)基于地理位置信息的應(yīng)用。本文結(jié)合實例給大家分享如何使用HTML5，借助百度、谷歌地圖接口來獲取用戶準確的地理位置信息。
創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)與策劃設(shè)計,漳浦網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:漳浦等地區(qū)。漳浦做網(wǎng)站價格咨詢:028-86922220
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現(xiàn)代瀏覽器上運行，特別是手持設(shè)備如iphone，地理定位更加精確。首先我們要檢測用戶設(shè)備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應(yīng)用時會提示是否允許地理定位，我們當然選擇允許即可。
?
1
2
3
4
5
6
7
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("瀏覽器不支持地理定位。");
}
}
上面的代碼可以知道，如果用戶設(shè)備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象，getCurrentPosition() 方法的第二個參數(shù)showError用于處理錯誤，它規(guī)定當獲取用戶位置失敗時運行的函數(shù)。
我們先來看函數(shù)showError()，它規(guī)定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失敗,用戶拒絕請求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失敗,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失敗,請求獲取用戶位置超時");
break;
case error.UNKNOWN_ERROR:
alert("定位失敗,定位系統(tǒng)失效");
break;
}
}
我們再來看函數(shù)showPosition(),調(diào)用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。
?
1
2
3
4
5
function showPosition(position){
var lat = position.coords.latitude; //緯度
var lag = position.coords.longitude; //經(jīng)度
alert('緯度:'+lat+',經(jīng)度:'+lag);
}
利用百度地圖和谷歌地圖接口獲取用戶地址
上面我們了解了HTML5的Geolocation可以獲取用戶的經(jīng)緯度，那么我們要做的是需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口，我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口，則會返回用戶所在的地理位置，包括省市區(qū)信息，甚至有街道、門牌號等詳細的地理位置信息。
我們首先在頁面定義要展示地理位置的div，分別定義id#baidu_geo和id#google_geo。我們只需修改關(guān)鍵函數(shù)showPosition()。先來看百度地圖接口交互，我們將經(jīng)緯度信息通過Ajax方式發(fā)送給百度地圖接口，接口會返回相應(yīng)的省市區(qū)街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù)，我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫，需要先加載jQuery庫文件。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
//baidu
var url = ";callback=renderReverselocation="+latlon+"output=jsonpois=0";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu_geo").html('正在定位...');
},
success: function (json) {
if(json.status==0){
$("#baidu_geo").html(json.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon+"地址位置獲取失敗");
}
});
});
再來看谷歌地圖接口交互。同樣我們將經(jīng)緯度信息通過Ajax方式發(fā)送給谷歌地圖接口，接口會返回相應(yīng)的省市區(qū)街道詳細信息。谷歌地圖接口返回的也是一串JSON數(shù)據(jù)，這些JSON數(shù)據(jù)比百度地圖接口返回的要更詳細，我們可以根據(jù)需求將需要的信息展示給div#google_geo。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
var url = ''+latlon+'language=CN';
$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位...');
},
success: function (json) {
if(json.status=='OK'){
var results = json.results;
$.each(results,function(index,array){
if(index==0){
$("#google_geo").html(array['formatted_address']);
}
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon+"地址位置獲取失敗");
}
});
}
以上的代碼分別將百度地圖接口和谷歌地圖接口整合到函數(shù)showPosition()中，我們可以根據(jù)實際情況進行調(diào)用。當然這只是一個簡單的應(yīng)用，我們可以根據(jù)這個簡單的示例開發(fā)出很多復(fù)雜的應(yīng)用，建議用手機瀏覽器訪問DEMO演示。
步驟 1: 在 HTML 中設(shè)置畫布，創(chuàng)建一個引用，并獲取上下文對象
畫布在 HTML 中通過 canvas 標簽定義。與其他標簽類似，canvas 的屬性（如寬度和高度）作為特性輸入。假設(shè)你希望創(chuàng)建一個寬 500 像素、高 500 像素的畫布，并將其命名為“can1”，稍后在 JavaScript 中引用它時將用到。
在 HTML 文檔中輸入 canvas 標簽。
1
canvas id="can1" width="500" height="500"/canvas
在 JavaScript 文檔中，創(chuàng)建一個變量，在編寫腳本時該變量將代替“can1”。這里，我們將該變量命名為“myCanvas”，并使用 getElementById 將其鏈接到“can1”。
1
var myCanvas = document.getElementById("can1");
畫布的 CanvasRenderingContext2D 對象具有操作畫布的所有命令。 這里，在上下文對象中檢索“can1”。將此變量稱為“myContext”。
1
var myContext = myCanvas.getContext("2d");
步驟 2: 繪制矩形、直線、貝塞爾曲線、圓和形狀
在畫布上繪制簡單的線條非常容易。使用 JavaScript 的 moveTo 方法可設(shè)置線條開始位置的坐標。然后只需使用另一方法設(shè)置終點。 第二步可以使用若干方法，每種方法專用于幫助呈現(xiàn)一種不同的線型，無論是直線、貝塞爾曲線還是圓弧。若要將線條合并為形狀，可以閉合對 beginPath 和 closePath 方法調(diào)用中的線條。在指定所需的外觀之后，可以使用 fill 方法應(yīng)用顏色，并使用 stroke 方法執(zhí)行線條和形狀的呈現(xiàn)。
應(yīng)用一些基本風格。這里，通過使用 fillStyle 屬性繪制一個黑色矩形，將畫布背景設(shè)置為黑色 (#000)。然后使用 strokeStyle 屬性將線條顏色設(shè)置為白色 (#fff)，使用 fillRect 方法應(yīng)用黑色背景，并使用 lineWidth 屬性將線條的粗細設(shè)置為 3 個像素。
// Specify a black background, and white lines that are 3 pixels thick.
myContext.fillStyle = '#000';
myContext.strokeStyle = '#fff';
myContext.fillRect(0,0,500,500);
myContext.lineWidth = 3;myContext.fill();
在后續(xù)步驟中，將在這個 500×500 的黑色畫布上繼續(xù)構(gòu)建。
現(xiàn)在，準備在畫布的黑色表面繪制一個白色線條。先從直線開始。
使用 moveTo 方法設(shè)置直線的起點，使用 lineTo 方法設(shè)置終點。
這些方法采用兩個數(shù)字作為參數(shù)。第一個數(shù)字表示 x 軸坐標，或者表示此坐標定義的自畫布左側(cè)算起的像素數(shù)。第二個數(shù)字是從頂部開始測量的 y 軸坐標。
// Draw a line that starts at the upper left corner of the canvas and ends at the lower right.
myContext.moveTo(0,0);
myContext.lineTo(500,500);
myContext.stroke();
若要繪制二次貝塞爾曲線，請使用 quadraticCurveTo 方法，該方法采用兩個坐標—曲線的一個控制點和一個端點。
// Draw a swooping curve that spans the width of the canvas.
myContext.moveTo(0,0);
myContext.quadraticCurveTo(0,500,500,250);
myContext.stroke();
若要繪制三次貝塞爾曲線，請使用 bezierCurveTo 方法，該方法采用三個坐標—曲線的兩個控制點和一個端點。
// Draw a V-shaped Bezier curve that spans the entire canvas.
myContext.moveTo(0,0);
myContext.bezierCurveTo(500, 820, 0, 500, 500, 0);
myContext.stroke();
若要創(chuàng)建一個圓，請使用 arc 方法：在設(shè)置用于繪制圓形輪廓的原點時，請確保將 moveTo 方法設(shè)置在沿線條路徑的位置上，否則圓上將有一條通向 moveTo坐標的“尾巴”。
// Draw a circle that spans the width of the canvas.
myContext.moveTo(500,250);
myContext.arc(250,250,250,0,Math.PI*2,true);
myContext.stroke();
通過閉合對 beginPath 和 closePath 調(diào)用中的多個線條，可以從上述線條的任意組合中繪制一個 2D 形狀。然后，整個形狀可以使用 fill 接收一種顏色。前面設(shè)置的筆劃樣式將創(chuàng)建白色線條，在與應(yīng)用于主體的紅色 (#f00) 合并時，該形狀將繼承雙色調(diào)外觀。
// Draw a red diamond that spans the entire canvas.
myContext.fillStyle = '#f00';
myContext.beginPath();
myContext.moveTo(250,0);
myContext.lineTo(0,250);
myContext.lineTo(250,500);
myContext.lineTo(500,250);
myContext.closePath();
myContext.fill();
步驟 3: 顯示位圖圖像
位圖圖像（如 .jpg、.png 和 .gif 文件）可以放置在畫布上，甚至可以在代碼中縮放和裁剪，不會觸及原始文件。若要添加位圖圖像，請指定該圖像的 URI，然后使用 drawImage 方法在畫布上指定其位置。使用可選參數(shù)可將圖像縮放到指定的大小，甚至僅顯示圖像的一個片段，這對于實現(xiàn)滾動背景或使用子畫面表動態(tài)顯示子畫面等操作非常有用。
若要在屏幕上繪制位圖圖像而不進行任何修改，請指定要用于左上角的 x 坐標和 y 坐標。
首先要設(shè)置父元素的position屬性值為relative，然后設(shè)置想要定位的部件的position為absolute，再設(shè)置left、top、right、bottom的值，左右只能設(shè)置一個，上下只能設(shè)置一個。
如果沒有設(shè)置父元素的position屬性，默認相對于body設(shè)置定位。
重慶分公司
重慶分公司
