2016-09-07 10 views
8

私はジオロケーション座標を使用するアプリケーションを開発しています。 サイト訪問者の場所を知るためにHTML5ジオロケーション機能を使用しましたが、問題は安全でない原点でGeoLocationをサポートしていないChromeの問題です。ここでSSL接続なしのジオロケーション

function showPosition(){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")"; 
      document.getElementById("result").innerHTML = positionInfo; 
     }); 
    } else{ 
     alert("Sorry, your browser does not support HTML5 geolocation."); 
    } 
} 

は、自分のサイトが接続されてSSLではないように、コードgetCurrentPositionがで動作していないです。

Chromeによる警告: getCurrentPosition()およびwatchPosition()は、安全でない原点では機能しなくなりました。この機能を使用するには、アプリケーションをHTTPSなどの安全な起点に切り替えることを検討する必要があります。

クロムに座標/ LatLong値を取得する他の方法はありますか? [安全でない接続でのみ]

EDIT:それはlocalhostを使用して、私のマシンで動作している:80しかし、HTTP上でのテストのURLで働いていない。ここ

+0

Googleで検索しました。しかし、良い解決策を見つけることができませんでした。 –

+0

明白な質問:HTTPSの使用を開始することは選択肢ではありません...? – deceze

+0

Httpsはオプションです。しかし、代わりのものがあるかどうかを知りたければ、 –

答えて

13
var apiGeolocationSuccess = function(position) { 
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude); 
}; 

var tryAPIGeolocation = function() { 
    jQuery.post("https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) { 
     apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}}); 
    }) 
    .fail(function(err) { 
    alert("API Geolocation error! \n\n"+err); 
    }); 
}; 

var browserGeolocationSuccess = function(position) { 
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude); 
}; 

var browserGeolocationFail = function(error) { 
    switch (error.code) { 
    case error.TIMEOUT: 
     alert("Browser geolocation error !\n\nTimeout."); 
     break; 
    case error.PERMISSION_DENIED: 
     if(error.message.indexOf("Only secure origins are allowed") == 0) { 
     tryAPIGeolocation(); 
     } 
     break; 
    case error.POSITION_UNAVAILABLE: 
     alert("Browser geolocation error !\n\nPosition unavailable."); 
     break; 
    } 
}; 

var tryGeolocation = function() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(
     browserGeolocationSuccess, 
     browserGeolocationFail, 
     {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true}); 
    } 
}; 

tryGeolocation(); 
+1

これはうまくいくと思います。アップデートしようとします –

+1

これはAPIキーを変更した後に機能しました。 –

+0

このソリューションは正確な座標を返さない –

3

サファリのための私の非SSLソリューションであります2017/05

var apiGeolocationSuccess = function(position) { 
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude); 
}; 

var tryAPIGeolocation = function() { 
    jQuery.post("https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) { 
     apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}}); 
    }) 
     .fail(function(err) { 
      alert("API Geolocation error! \n\n"+err); 
     }); 
}; 

var browserGeolocationSuccess = function(position) { 
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude); 
}; 

var browserGeolocationFail = function(error) { 
    switch (error.code) { 
     case error.TIMEOUT: 
      alert("Browser geolocation error !\n\nTimeout."); 
      break; 
     case error.PERMISSION_DENIED: 
      if(error.message.indexOf("Only secure origins are allowed") == 0) { 
       tryAPIGeolocation(); 
      } 
      break; 
     case error.POSITION_UNAVAILABLE: 
      // dirty hack for safari 
      if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) { 
       tryAPIGeolocation(); 
      } else { 
       alert("Browser geolocation error !\n\nPosition unavailable."); 
      } 
      break; 
    } 
}; 

var tryGeolocation = function() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(
      browserGeolocationSuccess, 
      browserGeolocationFail, 
      {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true}); 
    } 
}; 

tryGeolocation(); 

新しい部分が "ケースerror.POSITION_UNAVAILABLE" には、このいずれかになります。

case error.POSITION_UNAVAILABLE: 
// dirty hack for safari 
if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) { 
    tryAPIGeolocation(); 
} else { 
    alert("Browser geolocation error !\n\nPosition unavailable."); 
} 
break; 
関連する問題