chrome中斷getCurrentPosition javascript

我有一個頁面，我加載谷歌地圖。我通過http使用getCurrentPosition，甚至我收到來自google api的警告。問題是，它也打破了JavaScript，並破壞了一切。代碼工作了很長一段時間，但最後一週事情破裂了。chrome中斷getCurrentPosition javascript

下面是html和腳本。您可以在HTML中添加並運行它，看看（試圖用計算器但與腳本的一些問題）

<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>

來源

2016-05-09 Agraell

看看javascript控制檯中的警告，getCurrentLocation只支持HTTPS。 – geocodezip

不夠公平，但代碼像上週一樣沒有https。這是最後一刻的變化嗎？ – Agraell

在Chrome瀏覽器的javascript控制檯中已經有一段時間的警告，並且很久以前就宣佈了。 – geocodezip

getCurrentLocation僅支持在https://現在在Chrome。

在Chrome瀏覽器的javascript控制檯中已經有一段時間的警告，並且很久以前就宣佈了。

reference from your comment

使用Chrome 50起，Chrome瀏覽器不再支持獲得使用從非安全連接傳輸的網頁HTML5地理位置API用戶的位置。這意味着進行Geolocation API調用的頁面必須從安全上下文（如HTTPS）提供。

來源

2016-05-10 16:59:31 geocodezip

太好了。非常感謝！ – Agraell

chrome中斷getCurrentPosition javascript

回答

相關問題