javascript - vị trí địa lý không hoạt động trong codepen

Question

Tôi đang cố gắng triển khai một ứng dụng thời tiết đơn giản trong codepen. Các ứng dụng hoạt động tốt trên localhost Nó yêu cầu sự cho phép để sử dụng navigator.geolocation và nếu chấp nhận nó cho thấy thời tiết, nhưng trên codepen nó thậm chí không yêu cầu sự cho phép.

đây là liên kết

http://codepen.io/asamolion/pen/BzWLVe

Dưới đây là chức năng JS

function getWeather() { 
    'use strict'; 
    $('#getWeatherButton').hide(); 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var url = 'http://api.openweathermap.org/data/2.5/weather?APPID=53ac88144e6ee627ad0ed85277545ff9'; 
      //   var url = 'example.js'; 
      var apiCall = url + '&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude; 
      //   window.location.href = apiCall; 
      $.getJSON(apiCall, function (json) { 
       setSkycon(parseInt(json.weather[0].id, 10)); 
       $('#location').html(json.name + ', ' + json.sys.country); 
       var temp = (Math.round((json.main.temp - 273.15) * 100)/100); 
       $('#temp').html(temp + '<span id="degree">&deg;</span><span id="FC" onclick="convert()">C</span>'); 
       $('#condition').html(json.weather[0].main); 
      }); 

     }); 
    } 
}; 

Ai có thể cho tôi biết tại sao codepen không được xin phép?

Answer 1

Theo giao diện điều khiển trong Chrome:

getCurrentPosition() và watchPosition() đang bị phản đối về nguồn gốc không an toàn. Để sử dụng tính năng này, bạn nên cân nhắc chuyển ứng dụng của mình sang nguồn gốc an toàn, chẳng hạn như HTTPS.

Có thêm chi tiết tại đây: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins Về cơ bản Chrome chỉ muốn gửi thông tin vị trí qua HTTPS. Tuy nhiên, để cho phép các nhà phát triển thử nghiệm họ xử lý localhost như thể đó là một mạng bảo mật. Hi vọng điêu nay co ich!

Answer 2

Tôi đã có cùng một vấn đề trên cùng một thách thức. Đơn giản chỉ cần thêm codepen của bạn với https thay vì http và bạn sẽ ổn thôi.

Như thế này:

https://codepen.io/crownedjitter/pen/AXzdvQ

nếu bạn muốn sử dụng này:

navigator.geolocation.getCurrentPosition(); 

trong Chrome.

Answer 3

Bắt đầu với Chrome 50, Chrome đã ngừng hỗ trợ vị trí địa lý trên các giao thức không an toàn. https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only