利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上定位_HTML5教程
推薦：HTML5之SVG 2D入門(mén)10—濾鏡的定義及使用濾鏡稱得上是SVG最強(qiáng)大的功能了，它允許你給圖形(圖形元素和容器元素)添加各種專(zhuān)業(yè)軟件中才有的濾鏡特效,喜歡特效的朋友可千萬(wàn)不要錯(cuò)過(guò)啊。希望本對(duì)你有所幫助
本小菜剛開(kāi)始學(xué)習(xí)HTML5，現(xiàn)在對(duì)其中的Geolocation頗感興趣，結(jié)合Google Map的API實(shí)現(xiàn)基本的地圖定位功能。1.獲取當(dāng)前地理位置
調(diào)用方法 void getCurrentPosition(onSuccess, onError, options);即可。
其中onSuccess是獲取當(dāng)前位置信息成功時(shí)執(zhí)行的回調(diào)函數(shù)，onError是獲取當(dāng)前位置信息失敗時(shí)所執(zhí)行的回調(diào)函數(shù)，options是一些可選熟悉列表。其中第二和第三個(gè)參數(shù)為可選屬性。
在onSuccess回調(diào)函數(shù)中，用到了參數(shù)position，代表一個(gè)具體的position對(duì)象，表示當(dāng)前位置。其具有如下屬性：
•latitude：當(dāng)前地理位置的緯度。
•longitude：當(dāng)前地理位置的經(jīng)度。
•altitude：當(dāng)前位置的海拔高度（不能獲取時(shí)為null）。
•accuracy：獲取到的緯度和經(jīng)度的精度（以米為單位）。
•altitudeAccurancy：獲取到的海拔高度的經(jīng)度（以米為單位）。
•heading：設(shè)備的前進(jìn)方向。用面朝正被方向的順時(shí)針旋轉(zhuǎn)角度來(lái)表示（不能獲取時(shí)為null）。
•speed：設(shè)備的前進(jìn)速度（以米/秒為單位，不能獲取時(shí)為null）。
•timestamp：獲取地理位置信息時(shí)的時(shí)間。
在onError回調(diào)函數(shù)中，用到了error參數(shù)。其具有如下屬性：
•code：錯(cuò)誤代碼，有如下值。
1.用戶拒絕了位置服務(wù)（屬性值為1）；
2.獲取不到位置信息（屬性值為2）；
3.獲取信息超時(shí)錯(cuò)誤（屬性值為3）。
•message：字符串，包含了具體的錯(cuò)誤信息。
在options參數(shù)中，可選屬性如下：
•enableHighAccuracy：是否要求高精度的地理位置信息。
•timeout：設(shè)置超時(shí)時(shí)間（單位為毫秒）。
•maximumAge：對(duì)地理位置信息進(jìn)行緩存的有效時(shí)間（單位為毫秒）。
其中注意要寫(xiě)上如下代碼，判斷瀏覽器是否支持HTML5獲取地理位置信息，以兼容較早不支持的瀏覽器。
復(fù)制代碼 代碼如下:m.ghpqjb.com
if (navigator.geolocation) {
//獲取當(dāng)前地理位置信息
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("你的瀏覽器不支持HTML5來(lái)獲取地理位置信息。");
}
2.調(diào)用Google Map API獲取當(dāng)前位置信息
首先，需要在頁(yè)面中引用Google Map API的腳本文件，導(dǎo)入方法如下所示。
復(fù)制代碼 代碼如下:m.ghpqjb.com
其次，設(shè)定地圖參數(shù)，設(shè)定方法如下所示。
復(fù)制代碼 代碼如下:m.ghpqjb.com
//指定一個(gè)google地圖上的坐標(biāo)點(diǎn)，同時(shí)指定該坐標(biāo)點(diǎn)的橫坐標(biāo)和縱坐標(biāo)
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //設(shè)定放大倍數(shù)
center: latlng, //將地圖中心點(diǎn)設(shè)定為指定的坐標(biāo)點(diǎn)
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖類(lèi)型
};
最后，創(chuàng)建地圖，并在頁(yè)面中顯示，創(chuàng)建方法如下所示
復(fù)制代碼 代碼如下:m.ghpqjb.com
//創(chuàng)建地圖，并在頁(yè)面map中顯示
var map = new google.maps.Map(document.getElementById("map"), myOptions);
最后的最后，獻(xiàn)上本次示例所有代碼。代碼如下所示。
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲取當(dāng)前位置并顯示在google地圖上</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
//獲取當(dāng)前地理位置
navigator.geolocation.getCurrentPosition(function (position) {
var coords = position.coords;
//console.log(position);
//指定一個(gè)google地圖上的坐標(biāo)點(diǎn)，同時(shí)指定該坐標(biāo)點(diǎn)的橫坐標(biāo)和縱坐標(biāo)
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //設(shè)定放大倍數(shù)
center: latlng, //將地圖中心點(diǎn)設(shè)定為指定的坐標(biāo)點(diǎn)
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地圖類(lèi)型
};
//創(chuàng)建地圖，并在頁(yè)面map中顯示
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//在地圖上創(chuàng)建標(biāo)記
var marker = new google.maps.Marker({
position: latlng, //將前面設(shè)定的坐標(biāo)標(biāo)注出來(lái)
map: map //將該標(biāo)注設(shè)置在剛才創(chuàng)建的map中
});
//標(biāo)注提示窗口
var infoWindow = new google.maps.InfoWindow({
content: "當(dāng)前位置：<br/>經(jīng)度：" + latlng.lat() + "<br/>維度：" + latlng.lng() //提示窗體內(nèi)的提示信息
});
//打開(kāi)提示窗口
infoWindow.open(map, marker);
},
function (error) {
//處理錯(cuò)誤
switch (error.code) {
case 1:
alert("位置服務(wù)被拒絕。");
break;
case 2:
alert("暫時(shí)獲取不到位置信息。");
break;
case 3:
alert("獲取信息超時(shí)。");
break;
default:
alert("未知錯(cuò)誤。");
break;
}
});
} else {
alert("你的瀏覽器不支持HTML5來(lái)獲取地理位置信息。");
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
分享：利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用：HTML 5中的canvas有個(gè)接口getImageData可以用來(lái)從驗(yàn)證碼圖像中取得像素?cái)?shù)據(jù)。每一個(gè)像素有對(duì)應(yīng)r,g,b,a四個(gè)值，r,g,b是紅綠藍(lán)三色，a是透明度;觀察了一下，接下來(lái)說(shuō)下思路及實(shí)現(xiàn)代碼，感興趣的你可不喲啊走開(kāi)啊
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 Canvas畫(huà)圖教程(11)—使用lineTo/arc/bezierCurveTo畫(huà)橢圓形
- html5構(gòu)建觸屏網(wǎng)站之網(wǎng)站尺寸探討
- html5播放視頻且動(dòng)態(tài)截圖實(shí)現(xiàn)步驟與代碼(支持safari其他未測(cè)試)
- HTML5之WebGL 3D概述(下)—借助類(lèi)庫(kù)開(kāi)發(fā)及框架介紹
- HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)（Web Sql Database）
- HTML5上傳文件顯示進(jìn)度的實(shí)現(xiàn)代碼
- html5 svg 中元素點(diǎn)擊事件添加方法
- 基于Modernizr 讓網(wǎng)站進(jìn)行優(yōu)雅降級(jí)的分析
- html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標(biāo)簽樣式
- html5新增的屬性和廢除的屬性簡(jiǎn)要概述
- 相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上定位
- 教程說(shuō)明：
HTML5教程-利用HTML5中Geolocation獲取地理位置調(diào)用Google Map API在Google Map上定位
。