日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从零开始学google地图API(5)--粗略获取当前位置

發布時間:2023/12/29 编程问答 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 从零开始学google地图API(5)--粗略获取当前位置 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

之前研究過一段時間的定位
當時沒學過html,javascript,也不懂背后的原理
只知道用一些軟件,比如說trape等等
現在學了google地圖后,可以借助 navigator.geolocation來獲取位置信息并呈現在google地圖上

下面先做一個簡單的測試,首先是低精度請求
在這種情況下navigator.geolocation基于IP定位或 Wi-Fi 定位,這里我開了代理…所以顯示我在臺灣

<!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script> <script> function initialize() {function success(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;var yourmap = {center:new google.maps.LatLng(latitude ,longitude),zoom:11,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), yourmap); var marker=new google.maps.Marker({position:new google.maps.LatLng(latitude ,longitude),}); marker.setMap(map); var infowindow = new google.maps.InfoWindow({content:"我在這里!"}); infowindow.open(map,marker);}; function error() {alert('地理位置不可用');};if ("geolocation" in navigator) {navigator.geolocation.getCurrentPosition(success, error); } else{ alert('地理位置不可用'); } }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

重點關注函數部分

function initialize() {function success(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;var yourmap = {center:new google.maps.LatLng(latitude ,longitude),zoom:11,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("googleMap"), yourmap); var marker=new google.maps.Marker({position:new google.maps.LatLng(latitude ,longitude),}); marker.setMap(map); var infowindow = new google.maps.InfoWindow({content:"我在這里!"}); infowindow.open(map,marker);}; function error() {alert('地理位置不可用');}; if ("geolocation" in navigator) {navigator.geolocation.getCurrentPosition(success, error); } else{ alert('地理位置不可用'); } };

sucess是我們主要的獲取位置的函數,傳入的參數是位置信息

function success(position) {var latitude = position.coords.latitude;//保留精度和緯度var longitude = position.coords.longitude;var yourmap = {center:new google.maps.LatLng(latitude ,longitude),zoom:11,mapTypeId:google.maps.MapTypeId.ROADMAP};//根據我們獲取到的地理位置確定地圖中心var map=new google.maps.Map(document.getElementById("googleMap"), yourmap);//老熟人了..生成地圖 var marker=new google.maps.Marker({position:new google.maps.LatLng(latitude ,longitude)});//生成我們的標記,位置是在返回的定位 marker.setMap(map);//老熟人 var infowindow = new google.maps.InfoWindow({content:"我在這里!"});//消息窗口,內容是我在這里 infowindow.open(map,marker);//長在上面};

好像也沒那么復雜
接下來是個返回結果失敗的函數處理

function error() {alert('地理位置不可用');};

接下來這個就比較關鍵了,是我們獲取地理位置的原函數
首先是個 if的判斷語句
如果地理信息存在,我們將執行查詢的函數,否則返回不可用

if ("geolocation" in navigator) {navigator.geolocation.getCurrentPosition(success, error); } else{ alert('地理位置不可用'); }

這個函數是geolocation里面的精髓

navigator.geolocation.getCurrentPosition(success, error);

獲取用戶當前定位位置
異步地請求獲取用戶位置,并查詢定位硬件來獲取最新信息。當定位被確定后,定義的第一個回調函數(success)就會被執行。您可以選擇性地提供第二個回調函數,當有錯誤時會被執行(錯誤處理函數)。第三個參數也是可選的,您可以通過該對象參數設定最長可接受的定位返回時間、等待請求的時間和是否獲取高精度定位
默認情況下,getCurrentPosition() 會盡快返回一個低精度結果,這在您不關心準確度只關心快速獲取結果的情況下很有用。有 GPS 的設備可能需要一分鐘或更久來獲取 GPS 定位,在這種情況下 getCurrentPosition() 會返回低精度數據(基于 IP 的定位或 Wi-Fi 定位),就是我們這次測試基于的就是ip定位

所有的函數都在initliaze里面定義好,然后通過一個 google.maps.event.addDomListener(window, ‘load’, initialize);在初始化的時候調用,整體上來說思路還是比較清晰的,希望大家可以喜歡

忘記說了…現在獲取地理信息一定要先針得用戶的同意,比如說在firefox里會彈出,是否允許獲取當前位置信息,只有確定了才會get到,當然別人同不同意就看你的本事啦

總結

以上是生活随笔為你收集整理的从零开始学google地图API(5)--粗略获取当前位置的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。