用Geolocation取得地理位置信息
這次帶給大家用Geolocation獲取地理位置信息，用Geolocation獲取地理位置信息的注意事項有哪些，下面就是實戰案例，一起來看一下。
Html5中提供了地理位置資訊的API，透過瀏覽器取得使用者目前位置。基於此特性可以開發基於位置的服務應用。在取得地理位置資訊前，首先瀏覽器會向使用者詢問是否願意分享其位置信息，待使用者同意後才能使用。
Html5取得地理位置資訊是透過Geolocation API提供，使用其getCurrentPosition方法，此方法中有三個參數，分別是成功取得到地理位置資訊時所執行的回呼函數，失敗時所執行的回呼函數和可選屬性配置項。
如下Demo演示了透過Geolocation獲取地理位置信息，並在百度地圖上顯示當前位置（透過呼叫百度地圖API）。實驗結果發現位置被定位到了大學城內環東四路入口處，與本人所在位置（華工學生宿舍）偏差還是有點大的，達到200-300米左右。
程式碼如下所示（其中convertor.js為百度地圖提供的座標轉換檔）：
<!DOCTYPE html>
<html>
<head>
<title>H5地理位置Demo</title>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
</script>
<script type="text/javascript" src="convertor.js">
</script>
</head>
<body>
<p id="map" style="width:600px; height:400px">
</p>
</body>
<script type="text/javascript">
if (window.navigator.geolocation) {
var options = {
enableHighAccuracy: true,
};
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
} else {
alert("浏览器不支持html5来获取地理位置信息");
}
function handleSuccess(position){
// 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 调用百度地图api显示
var map = new BMap.Map("map");
var ggPoint = new BMap.Point(lng, lat);
// 将google地图中的经纬度转化为百度地图的经纬度
BMap.Convertor.translate(ggPoint, 2, function(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
}
function handleError(error){
}
</script>
</html>convertor.js檔案：
(function() { // 闭包
function load_script(xyUrl, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('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 appendChild 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;
})();相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是用Geolocation取得地理位置信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何修改抖音IP屬地
May 04, 2024 pm 04:36 PM
是的，您可以修改抖音 IP 屬地，方法如下：開啟抖音，編輯個人資料。修改城市訊息，選擇您要顯示的城市或地區。登出並重新登錄，使修改生效。
高德地圖是不是要手機註冊
May 05, 2024 pm 05:12 PM
是的，為了安全保障、個人化服務和帳號管理，高德地圖需要使用手機號碼註冊。註冊步驟包括：開啟高德地圖應用，點擊“我的”和“登入/註冊”，選擇手機號碼註冊，輸入手機號碼取得驗證碼，設定密碼即可完成註冊。
微博怎麼發圖片和影片一起
May 03, 2024 am 01:15 AM
微博同時發布圖片和影片的操作步驟如下：選擇相關或互補的圖片和影片。打開微博客戶端並點擊發布按鈕。選擇“圖片和影片”標籤。新增圖片和影片（最多9張圖片及1個影片）。輸入文字內容並新增相關資訊。發布即可。
抖音的IP位址是怎麼顯示的？ IP位址顯示的是即時位置嗎？
May 02, 2024 pm 01:34 PM
用戶在抖音不僅可以觀看各種有趣的短視頻，還可以發布自己拍攝的作品，與全國乃至全球的網友互動。在這個過程中，抖音的IP位址顯示功能引起了廣泛關注。一、抖音的IP位址是怎麼顯示的？抖音的IP位址顯示功能主要是透過地理位置定位服務來實現的。當使用者在抖音上發布或觀看影片時，抖音會自動取得使用者的地理位置資訊。這個過程主要分為以下幾個步驟：首先，用戶啟用抖音應用程式並允許應用程式存取其地理位置資訊；其次，抖音使用定位服務來獲取用戶的地理位置資訊；最後，抖音將用戶的地理位置資訊與其發布或觀看的影片資料相關聯，並將
抖音推薦怎麼重新設定？如何把推薦改為精選?
May 08, 2024 pm 03:52 PM
抖音作為一個以短影片為主的社群平台，推薦演算法是其核心功能之一。它能夠根據用戶的興趣和行為，推薦相關的影片內容。有時使用者可能想要重新設定推薦演算法，以獲得更符合自己喜好的內容。那麼，抖音推薦怎麼重新設定呢？抖音如何把推薦改為精選？本文將為您解答這兩個問題。一、抖音推薦怎麼重新設定？ 1.開啟抖音APP，進入個人首頁。 2.點選右上角的「設定」圖標，進入設定頁面。 3.在設定頁面，找到「建議管理」選項，點選進入。 4.在推薦管理頁面，你可以看到自己的興趣標籤和興趣偏好。你可以依照自己的喜好，選擇或取消選擇不同的
抖音如何修改位置權限
May 03, 2024 pm 11:24 PM
修改抖音位置權限的步驟：1. 開啟抖音應用，點選「我」。 2. 點選右上角的「三橫槓圖示」。 3. 選擇“設定”。 4. 找到“隱私設定”，並點選。 5. 點選「定位服務」。 6. 根據需要選擇「允許使用定位」或「僅在使用時詢問」。 7. 修改後需重啟抖音應用才能生效。
抖音如何更改建議設定
May 04, 2024 am 12:06 AM
可以透過更改「內容偏好」設定來更改抖音推薦，包括調整推薦影片類型、追蹤有興趣的創作者、封鎖不喜歡的內容、設定影片語言、地理位置限制、熱門話題追蹤和清除搜尋/瀏覽記錄。
