h5定位geolaction沒法調試解決方法

昨天接到一個在h5獲取經緯度的需求，看了文檔後，代碼其實很簡單，但在瀏覽器上調試就比較蛋疼了...

代碼：

function successfulCallback(position) {

console.log('-----------successfulCallback--------',position)

alert("獲取地理位置成功！");

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

console.log(longitude, latitude);

}

function failCallback(error) {

var text;

switch (error.code) {

case error.PERMISSION_DENIED:

text = "用戶拒絕對獲取地理位置的請求。";

break;

case error.POSITION_UNAVAILABLE:

text = "位置信息是不可用的。";

break;

case error.TIMEOUT:

text = "請求用戶地理位置超時。";

break;

case error.UNKNOWN_ERROR:

text = "未知錯誤。";

break;

}

alert(text);

}

// 獲取當前經緯度

function getPosition() {

console.log('-----------getPosition--------')

//判斷瀏覽器是否支持HTML5 定位

if ("geolocation" in navigator) {

console.log('-----------support navigator--------')

navigator.geolocation.getCurrentPosition(

successfulCallback,

failCallback

);

} else {

alert("你的瀏覽器不能使用HTML5定位");

}

}

關於geolaction的介紹，我想這個文檔會比我講得更詳細：

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

獲取經緯度方式有兩種：

1.navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 【適用於對經度要求不高的，可得到低精度，後兩個參數可選】

2.navigator.geolocation.watchPosition(successCallback, errorCallback, options) 【適用於對經度有要求的，可得到高精度，後兩個參數可選】

　　ps：watchPosition()會返回一個 ID，惟一地標記該位置監視器。可將該ID 傳給clearWatch(ID)來中止監視用戶位置。

本地無服務調試：

1.是否獲取地理位置的提示框有時不出來.... 很尷尬；

2.出來了，點擊容許就沒而後了.... 也很尷尬

3.點擊容許後，得到了想要的經緯度 ... 大概要看瀏覽器心情

公司測試環境看效果：

是否贊成獲取地理位置的彈框始終不出來.....  我一度覺得是代碼問題or環境問題【公司項目比較老】 

後發現這個提示：

搜了下CanIus裏各瀏覽器支持狀況：

查看其CanIUse裏的notice，會發現，geolocation越日後基本就只支持https請求的，點擊測試環境裏瀏覽器提示裏的連接，裏面提供了非安全環境（即http環境）測試方法：

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

粘貼部分原文以下：

Testing Powerful Features

If you are a developer that needs to keep testing a site using a Powerful Feature but you only have a non-secure test server, you have several options:

1. 1. Secure the server with a publicly-trusted certificate. If the server is reachable from the Internet, several public CAs offer free, automatically-renewed server certificates.
      
      
   2. http://localhost is treated as a secure origin, so if you're able to run your server from localhost, you should be able to test the feature on that server.
      
      
   3. You can run chrome with the --unsafely-treat-insecure-origin-as-secure="http://example.com" flag (replacing "example.com" with the origin you actually want to test), which will treat that origin as secure for this session. Note that on Android and ChromeOS this requires having a device with root access/dev mode. (This flag is broken in Chrome 63 but fixed in Chrome 64 and later. Prior to Chrome 62, you must also include the --user-data-dir=/test/only/profile/dir to create a fresh testing profile for the flag to work.) 
      
      
   4. Create a self-signed certificate for temporary testing. Direct use of such a certificate requires clicking through an invalid certificate interstitial, which is otherwise not recommended. Note that because of this interstitial click-through (which also prevents HTTPS-response caching), we recommend options (1) and (2) instead, but they are difficult to do on mobile. See this post on setting up a self-signed certificate for a server for more information on how to do this.
      
      An alternative approach is to generate a self-signed root certificate which you place into the trust store of the developer PC/devices, and then issue one or more certificates for the test servers. Trusting the root certificate means that Chrome will treat the site as secure and load it without interstitials or impacting caching. One easy way of setting up and using a custom root certificate is to use the open source mkcert tool.

We continue to invest in improved methods for testing powerful features on insecure origins, and we'll update this page once we've developed them. Feel free to contribute ideas to  security-dev@chromium.org.

 

由於開發在測試環境調試，故採用了第三個方式：

1.在chrome輸入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

2.直接找 Insecure origins treated as secure 或者全局搜索

3.把要設置的域名輸入對應框內，如：http://test.com ，設置起爲enable，而後Relaunch瀏覽器便可

ps： 最後獲取地理位置提示彈窗會出來，但並非每次都出來，且有時回調響應很慢，要等... 確實蠻尷尬