Chrome上的getCurrentPosition会中断JavaScript [英] getCurrentPosition on chrome breaks javascript
问题描述
我有一个页面加载谷歌地图。我通过http使用getCurrentPosition，甚至我收到来自google api的警告。问题是，它也打破了JavaScript，并破坏了一切。代码工作了很长一段时间，但最后一周事情破裂了。
下面是html和脚本。您可以将它添加到html中并运行它并查看（使用stackoverflow进行尝试，但对脚本有一些问题）
< html> ;
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no/>
< / head>
< body>
< header class =desktop>
< / header>
< div id =st-containerclass =st-container>
< div class =st-pusher>
< div class =st-content>
< div class =st-content-inner>
< div class =logo-mobile>
< / div>
< section class =map-sections>
< div style =position：absolute; z-index：1000; width：100％; margin-top：30px;>
< div class =row>
< div class =large-12 columns>
< div class =filter clearfix>
< input type =textid =search-fieldplaceholder =Search place>
< span> eller ...< / span>
< / div>
< / div>
< / div>
< / div>
< div id =google_canvas>< / div>
< script src =http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true>< / script>
< script type =text / javascript>
函数showMap（userPos）{
if（!! navigator.geolocation）{
var map;
if（userPos =='true'）{
var mapOptions = {
zoom：12，
enableHighAccuracy：true，
mapTypeControl：false，
streetViewControl：false，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom：5，
enableHighAccuracy：false，
mapTypeControl：false，
streetViewControl：false ，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map（document.getElementById（'google_canvas'），mapOptions）;
navigator.geolocation.getCurrentPosition（function（position）{
var geolocate = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）;
var sectionList = [
['Stockholm'，59.327，18.067]，
['Göteborg'，57.70889，11.97348]
];
var mapPinUser ='/dist/img/map-pin-user.png';
var mapPinSection ='/dist/img/map-pin-section.png';
//用户的位置
var marker = new google.maps.Marker（{
position：geolocate，
map：map，
icon：mapPinUser，
title：ok
}）;
for（var i = 0; i< sectionList.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps。 LatLng（sectionList [i] [1]，sectionList [i] [2]），
map：map，
icon：mapPinSection，
id：i，
动画：google .maps.Animation.DROP，
title：sectionList [i] [0]
}）;
}
if（userPos =='true'）{
map.panTo（geolocate）;
}
else {
map.setCenter（{lat：61.58549，lng：15.02930}）;
}
}）;
} else {
document.getElementById（'google_canvas'）。innerHTML ='无地理位置支持。';
}
}
showMap（'false'）;
< / script>
< style>
#google_canvas {
height：65vh;
}
< / style>
< / section>
< / div>
< / div>
< / div>
< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js>< / script>
< / body>
< / html>
getCurrentLocation仅支持 https：// 现在在Chrome上。
在Chrome中的JavaScript控制台中已经有一段时间了，刚刚宣布。
从Chrome 50开始，Chrome不再支持获取用户的位置使用来自非安全连接传递的页面的HTML5地理定位API。这意味着进行Geolocation API调用的页面必须从安全的上下文（例如HTTPS）中提供。
I have a page where I am loading google maps. I use getCurrentPosition over http and even I receive a warning from google api. The problem is that it breaks also the javascript and that ruins everything. The code was working for quite some time but the last week things broke.
Below is the html and script. You can add it in html and run it and see (tried with stackoverflow but had some issues with the script)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header class="desktop">
</header>
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<div class="logo-mobile">
</div>
<section class="map-sections">
<div style="position: absolute; z-index: 1000; width: 100%; margin-top: 30px;">
<div class="row">
<div class="large-12 columns">
<div class="filter clearfix">
<input type="text" id="search-field" placeholder="Search place">
<span>eller...</span>
<a href="#" id="search-button" class="btn pink geolocate" onclick="showMap('true');">Search near you</a>
</div>
</div>
</div>
</div>
<div id="google_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function showMap(userPos) {
if (!!navigator.geolocation) {
var map;
if (userPos == 'true') {
var mapOptions = {
zoom: 12,
enableHighAccuracy: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom: 5,
enableHighAccuracy: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function (position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var sectionList = [
['Stockholm', 59.327, 18.067],
['Göteborg', 57.70889, 11.97348]
];
var mapPinUser = '/dist/img/map-pin-user.png';
var mapPinSection = '/dist/img/map-pin-section.png';
// User's position
var marker = new google.maps.Marker({
position: geolocate,
map: map,
icon: mapPinUser,
title: "ok"
});
for (var i = 0; i < sectionList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sectionList[i][1], sectionList[i][2]),
map: map,
icon: mapPinSection,
id: i,
animation: google.maps.Animation.DROP,
title: sectionList[i][0]
});
}
if (userPos == 'true') {
map.panTo(geolocate);
}
else {
map.setCenter({ lat: 61.58549, lng: 15.02930 });
}
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
}
showMap('false');
</script>
<style>
#google_canvas {
height: 65vh;
}
</style>
</section>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
getCurrentLocation is only supported over https:// now on Chrome.
There has been a warning in place in the javascript console in Chrome for quite a while, and it was announced a while ago.
Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.
这篇关于Chrome上的getCurrentPosition会中断JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
