网站不会在Chrome上加载javascript我不知道为什么，而Mozilla正确显示它。 不知道什么是错的。
网站主要功能 1.获取客户的地理位置（第一个lat长并找到最近的城市） 2.使用openweathermap API获取天气数据 3.在网站上显示。
// Taken and modifed from https://roessland.com/blog/free-code-camp-3-a-random-quote-machine/
$(document).ready(function () {
// geo
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat_lat = position.coords.latitude;
var lon_lon = position.coords.longitude;
//google maps
var geocoder = new google.maps.Geocoder();
var latitude = lat_lat;
var longitude = lon_lon;
var latLng = new google.maps.LatLng(latitude,longitude);
geocoder.geocode({
latLng: latLng
},
function(responses)
{
if (responses && responses.length > 0)
{ // starting weather API
var addressas = (responses[2].address_components[4].long_name); //get address
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q="+addressas+"&mode=json&units=metric&cnt=10&APPID=5b18b37cb72f7fbdc5714dc6b3798007 ",function(result){
// Get and convert temperatures from celsius to farenghate
var curentDayTemp = Math.round(result.list[0].temp.day);
var curentNightTemp = Math.round(result.list[0].temp.night);
var secDayTemp = Math.round(result.list[1].temp.day);
var secNightTemp = Math.round(result.list[1].temp.night);
var thirdDayTemp = Math.round(result.list[2].temp.day);
var thirdNightTemp = Math.round(result.list[2].temp.night);
var forthDayTemp = Math.round(result.list[3].temp.day);
var forthNightTemp = Math.round(result.list[3].temp.night);
// feting celsius to far
function toFar(cels) {
return cels*1.8 + 32;
}
$("p.city").html(result.city.name);
$("div.today > p.cur-weather").html(result.list[0].weather[0].description);
$("div.today > p.max-temp-cel").html("Day "+ curentDayTemp+" ℃");
$("div.today > p.min-temp-cel").html("Night "+ curentNightTemp+" ℃");
$("div.today > p.max-temp-far").html("Day "+ Math.round(toFar(curentDayTemp))+" ℉");
$("div.today > p.min-temp-far").html("Night "+ Math.round(toFar(curentNightTemp))+" ℉");
$("div.today > p.humidity").html("Humidity: "+result.list[0].humidity);
$("div.today > p.wind-speed").html("Wind speed: "+ result.list[0].speed);
$("div.today > p.pressure").html("Pressure: "+ result.list[0].pressure);
$("div.today > p.clouds").html("Clouds: "+ result.list[0].clouds+"%");
// 2nd day
$("div.2nd-day > p.cur-weather").html(result.list[1].weather[0].description);
$("div.2nd-day > p.max-temp-cel").html("Day "+ secDayTemp+" ℃");
$("div.2nd-day > p.min-temp-cel").html("Night "+ secNightTemp+" ℃");
$("div.2nd-day > p.max-temp-far").html("Day "+ Math.round(toFar(secDayTemp))+" ℉");
$("div.2nd-day > p.min-temp-far").html("Night "+ Math.round(toFar(secNightTemp))+" ℉");
$("div.2nd-day > p.humidity").html("Humidity: "+result.list[1].humidity);
$("div.2nd-day > p.wind-speed").html("Wind speed: "+ result.list[1].speed);
$("div.2nd-day > p.clouds").html("Clouds: "+ result.list[1].clouds+"%");
// 3rd day
$("div.3rd-day > p.cur-weather").html(result.list[2].weather[0].description);
$("div.3rd-day > p.max-temp-cel").html("Day "+ thirdDayTemp+" ℃");
$("div.3rd-day > p.min-temp-cel").html("Night "+ thirdNightTemp+" ℃");
$("div.3rd-day > p.max-temp-far").html("Day "+ Math.round(toFar(thirdDayTemp))+" ℉");
$("div.3rd-day > p.min-temp-far").html("Night "+ Math.round(toFar(thirdNightTemp))+" ℉");
$("div.3rd-day > p.humidity").html("Humidity: "+result.list[2].humidity);
$("div.3rd-day > p.wind-speed").html("Wind speed: "+ result.list[2].speed);
$("div.3rd-day > p.clouds").html("Clouds: "+ result.list[2].clouds+"%");
// 4th day
$("div.4th-day > p.cur-weather").html(result.list[3].weather[0].description);
$("div.4th-day > p.max-temp-cel").html("Day "+ forthDayTemp+" ℃");
$("div.4th-day > p.min-temp-cel").html("Night "+ forthNightTemp+" ℃");
$("div.4th-day > p.max-temp-far").html("Day "+ Math.round(toFar(forthDayTemp))+" ℉");
$("div.4th-day > p.min-temp-far").html("Night "+ Math.round(toFar(forthNightTemp))+" ℉");
$("div.4th-day > p.humidity").html("Humidity: "+result.list[3].humidity);
$("div.4th-day > p.wind-speed").html("Wind speed: "+ result.list[3].speed);
$("div.4th-day > p.clouds").html("Clouds: "+ result.list[3].clouds+"%");
// add dates
var today = new Date();
var toD = today.getDate();
var toM = today.getDate()+1;
var toAT = today.getDate()+2;
var toATT = today.getDate()+3;
var mm = today.getMonth();
var yyyy = today.getFullYear();
today = yyyy+'-'+mm+'-'+toD;
tomorow = yyyy+'-'+mm+'-'+toM;
dayAfterTomorow = yyyy+'-'+mm+'-'+toAT;
dayAfterTomorowTomorow = yyyy+'-'+mm+'-'+toATT;
$("p.today-time").html(today);
$("p.sec-time").html(tomorow);
$("p.thrd-time").html(dayAfterTomorow);
$("p.forth-time").html(dayAfterTomorowTomorow);
$('.celsius').click(function() {
var $this = $(this);
$this.toggleClass('fahrenheit celsius');
if($this.hasClass('fahrenheit')){
$this.text('Fahrenheit');
} else {
$this.text('Celsius');
}
$('.far-cel-toggle').toggleClass('hide show');
});
// Add class to body for background
var str = result.list[0].weather[0].id;
var chClass = document.getElementById("tarback");
chClass.className += "a"+str;
// Add class for weather icons
var str1 = result.list[1].weather[0].id;
var str2 = result.list[2].weather[0].id;
var str3 = result.list[3].weather[0].id;
var icClass = document.getElementById("wi-ic");
icClass.className += "wi wi-owm-"+str;
var icClass = document.getElementById("wi-ic1");
icClass.className += "wi wi-owm-"+str1;
var icClass = document.getElementById("wi-ic2");
icClass.className += "wi wi-owm-"+str2;
var icClass = document.getElementById("wi-ic3");
icClass.className += "wi wi-owm-"+str3;
});
}
else
{
alert('Not getting Any address for given latitude and longitude.');
}
}
);
});
}
}); /* thunderstorm */
body.a200, body.a201, body.a202, body.a210, body.a211, body.a212, body.a221, body.a230, body.a231, body.a232 {
background-image: url(https://simsim.lt/fcc/img/thunderstorm.jpg);
}
/* Drizzle */
body.a300, body.a301, body.a302, body.a310, body.a311, body.a312, body.a313, body.a314, body.a321 {
background-image: url(https://simsim.lt/fcc/img/drizzle.jpg);
}
/* Rain */
body.a500, body.a501, body.a502, body.a503, body.a504, body.a511, body.a520, body.a521, body.a522, body.a531 {
background-image: url(https://simsim.lt/fcc/img/rain.jpg);
}
/* Snow */
body.a906, body.a903, body.a600, body.a601, body.a602, body.a611, body.a612, body.a615, body.a616, body.a620, body.a621, body.a622 {
background-image: url(https://simsim.lt/fcc/img/snow.jpg);
}
/* Atmosphere */
body.a701, body.a711, body.a721, body.a731, body.a741, body.a751, body.a761, body.a762, body.a771, body.a781 {
background-image: url(https://simsim.lt/fcc/img/fog.jpg);
}
/* Clear sky */
body.a800 {
background-image: url(https://simsim.lt/fcc/img/clear-sky.jpeg);
}
/* Clouds */
body.a801, body.a802, body.a803, body.a804 {
background-image: url(https://simsim.lt/fcc/img/clouds.jpg);
}
/* hurricane */
body.a961, body.a960, body.a902, body.a962, body.a900, body.a901 {
background-image: url(https://simsim.lt/fcc/img/hurricane.jpg);
}
/* hot */
body.a904 {
background-image: url(https://simsim.lt/fcc/img/hot.jpg);
}
/* windy */
body.a905, body.a954, body.a955, body.a956, body.a958, body.a957, body.a959 {
background-image: url(https://simsim.lt/fcc/img/windy.jpg);
}
/* Clam */
body.a951, body.a952, body.a953 {
background-image: url(https://simsim.lt/fcc/img/clam.jpg);
}
.block-warp {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
margin: 2% 0 0 0;
padding: 1%;
}
.last-3 p, .last-3 i {
color: darkseagreen;
}
.strong {font-weight: bold;}
.main i, .main p { color: beige; }
.icon-wrap, .icon,
.icon-wrap, .wi {
font-size: 50px;
padding: 0% 0 1% 0;}
.link {text-align: center;}
.hide {display: none;}
#buttonas{
display: block;
margin:1% auto;
font-family: 'Oswald', sans-serif;
background-color: transparent;
border: black 3px solid;
width: 10%;
line-height: 2em;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="https://simsim.lt/fcc/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald|Shrikhand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://simsim.lt/fcc/css/weather-icons.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body id="tarback" class="">
<div class="warp container-fluid">
<div class="link strong red"><a class="test" href="https://freecodecamp.com">Free code camp</a> and <a href="http://openweathermap.org/">Open Weather map API</a></div>
<div>
<button id="buttonas" class="celsius">Celsius</button>
</div>
<div class="block-warp"> <!-- Main block-->
<div class="row text-center">
<div class="today main strong">
<p class="today-time"></p>
<p class="city h1"></p>
<p class="cur-weather h3"></p> <!-- curent temp -->
<i id="wi-ic" class=""></i>
<div class="row">
<div class="col-xs-4 col-sm-1 today col-md-offset-5">
<p class="far-cel-toggle curent-temp-min min-temp-cel show"></p>
<p class="far-cel-toggle curent-temp-min min-temp-far hide"></p>
</div>
<div class="col-xs-2 col-sm-1 today">
<p class="far-cel-toggle curent-temp-max max-temp-cel show"></p>
<p class="far-cel-toggle curent-temp-max max-temp-far hide"></p>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-1 today col-md-offset-5">
<p class="humidity"></p>
</div>
<div class="col-xs-2 col-sm-1 today">
<p class="wind-speed"></p>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-1 today col-md-offset-5">
<p class="clouds"></p>
</div>
<div class="col-xs-2 col-sm-1 today">
<p class="pressure"></p>
</div>
</div>
</div> <!-- today ends -->
</div><!-- row ends -->
</div><!-- inner warp ends -->
<div class="last-3">
<div class="row text-center">
<div class="col-xs-2 col-md-2 col-md-offset-2 block-warp">
<div class="2nd-day">
<p class="sec-time"></p>
<p class="cur-weather h4"></p> <!-- curent temp -->
<i id="wi-ic1" class=""></i>
<p class="cur-temp"></p>
<p class="far-cel-toggle min-temp-cel show"></p>
<p class="far-cel-toggle min-temp-far hide"></p>
<p class="far-cel-toggle max-temp-cel show"></p>
<p class="far-cel-toggle max-temp-far hide"></p>
<p class="humidity"></p>
<p class="wind-speed"></p>
<p class="clouds"></p>
</div><!-- 2nd day ends -->
</div><!-- coll ends -->
<div class="col-xs-2 col-md-2 col-md-offset-1 block-warp">
<div class="3rd-day">
<p class="thrd-time"></p>
<p class="cur-weather h4"></p> <!-- curent temp -->
<i id="wi-ic2" class=""></i>
<p class="cur-temp"></p>
<p class="far-cel-toggle min-temp-cel show"></p>
<p class="far-cel-toggle min-temp-far hide"></p>
<p class="far-cel-toggle max-temp-cel show"></p>
<p class="far-cel-toggle max-temp-far hide"></p>
<p class="humidity"></p>
<p class="wind-speed"></p>
<p class="clouds"></p>
</div><!-- 3rd day ends -->
</div><!-- coll ends -->
<div class="col-xs-2 col-md-2 col-md-offset-1 block-warp">
<div class="4th-day">
<p class="forth-time"></p>
<p class="cur-weather h4"></p> <!-- curent temp -->
<i id="wi-ic3" class=""></i>
<p class="cur-temp"></p>
<p class="far-cel-toggle min-temp-cel show"></p>
<p class="far-cel-toggle min-temp-far hide"></p>
<p class="far-cel-toggle max-temp-cel show"></p>
<p class="far-cel-toggle max-temp-far hide"></p>
<p class="humidity"></p>
<p class="wind-speed"></p>
<p class="clouds"></p>
</div><!-- 4th day ends -->
</div><!-- coll ends -->
</div><!-- row ends -->
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您只能在Chrome中使用安全网站中的地理位置（即HTTPS协议）：
注意：从Chrome 50开始，Geolocation API仅适用于HTTPS等安全上下文。如果您的网站托管在非安全源（例如HTTP）上，则获取用户位置的请求将不再起作用。