上海玩捕鱼机大吗

書名：構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）
作者名：常新峰
本章字數： 502字
更新時間： 2020-11-29 00:14:09

4.2 手機地理位置定位

在一個以地點為核心的POI系統中，需要獲取用戶地理位置的坐標。本例演示通過Wi-Fi獲取當前地理位置的坐標。當用戶打開瀏覽器時，頁面上顯示通過手機3G網絡信號地理定位的當前坐標，同時用Google Maps顯示標記當前的地理位置。

在iPhone上使用Safari瀏覽器打開網頁文件，運行效果如圖4.6所示。

圖4.6 詢問是否允許使用當前的位置

提示

本例需要通過架設Web服務器來訪問文件。

點擊“好”按鈕，運行效果如圖4.7所示。

圖4.7 IP使用聯通3G網絡定位

提示

代碼在iPhone的Safari瀏覽器下測試通過，建議使用Safari瀏覽器打開；確保手機關閉WiFi；確保手機已通過手機信號連接上網絡；出于隱私考慮，在第一次運行該頁面時，會彈出提示是否授權使用您的地理位置信息，該程序需要授權才可正常使用定位功能。

本例“4-1．手機地理定位．html”的關鍵函數via3G代碼如下：

【代碼4-1】

        01    function via3G(){
        02       if (navigator.geolocation) {                    // 判斷瀏覽器是否支持
        03            // 通過HTML 5 getCurrnetPosition API獲取定位信息
        04             navigator.geolocation.getCurrentPosition(function(position) {
        05                var info = $("#info"),                 // 獲取地理位置信息控件
        06                    longlat_html =                     // 拼接HTML
        07                    '<h4>手機定位</h4>'+
        08                      '<ul>'+
        09                    '<li>經度：' + position.coords.longitude + '</li>'+
        10                    '<li>緯度：' + position.coords.latitude + '</li>'+
        11                      '</ul>';
        12                info.html(longlat_html);                  // 設置顯示內容結構
        13                  showMap(position.coords, document.getElementById("map"));
        14             });
        15        } else {
        16            var _3g = $("#info");                          // 獲取提示元素
        17            _3g.html("您的瀏覽器不支持HTML 5 Geolocation API定位").css('color',
    '#F30');
        18        }
        19    }

第04行，調用navigator.geolocation.getCurrentPosition方法通過手機信號獲取定位信息。

官术网_书友最值得收藏!

構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）

4.2 手機地理位置定位