2016-04-09 40 views
0

Dolayısıyla, bu örnek konum belirleme uygulamasının, HTML5 ve Javascript'te, kullanıcının mevcut konumunu google haritalarında görüntülemesi gerekiyor. Herhangi bir nedenden ötürü, tüm gizlilik ayarlarım etkin olsa bile bunu işe alamıyorum. Tarayıcımda ve Cordova önizlemesinde, sayfamın konumumu izlemekten hala engelleniyor. Örnek kod, web sayfasındaki bağlantıyı tıklattığımda örnek uygulamanın çalıştığı https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api kodundan aldım. Bunun neden çalışmadığı hakkında bir fikrin var mı?Coğrafi Konum Uygulama çalışmıyor

<!DOCTYPE html> 
<html> 
    <head> 
    <title>mobiForge geolocation map API demo</title> 
    <style> 
     body,html {height:100%} 
     #map {width:100%;height:100%;} 
    </style> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDbnJWPQoF5XQgI-akwQjyB6GKOFNtDO54"></script> 
    <script> 
     var map; 
     function initGeolocation() { 
     if (navigator && navigator.geolocation) { 
     var watchId = navigator.geolocation.watchPosition(successCallback, 
                 errorCallback, 
                {enableHighAccuracy:true,timeout:60000,maximumAge:0}); 

     } else { 
      console.log('Geolocation is not supported'); 
     } 
     } 

     function errorCallback() {} 

     function successCallback(position) { 
     var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     if(map == undefined) { 
      var myOptions = { 
      zoom: 15, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
     } 
     else map.panTo(myLatlng); 
    } 


    </script> 
    </head> 
    <body onload="javascript:initGeolocation()"> 
    <div id="map"> 
    </div> 
    </body> 
</html> 
Sen url beyaz liste bahsetmedim
+0

Coğrafi konum cordova eklentisi kullanıyor musunuz? – vbharath

cevap

0
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'"> 
    <script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&libraries=places" async defer></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script src="css/jquery-ui.css"></script> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
    var map; 
    var latitude; 
    var longitude; 
    var mapOptions; 
    var myLatLan; 
    document.addEventListener("deviceready", function() { 

     navigator.geolocation.getCurrentPosition(onSuccess, onError); 


    }, false); 

    function onSuccess(position){ 
     latitude=position.coords.latitude; 
     longitude=position.coords.longitude; 
     myLatLan={lat:latitude,lng:longitude}; 
     console.log(myLatLan); 
     mapOptions={ 
     zoom: 8, 
     center: myLatLan 
     }; 

    } 

    function onError(error){ 
      alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); 
    } 

    function showmap(){ 
     var div = document.getElementById("map_canvas"); 
     map = new google.maps.Map(div,mapOptions); 
     myLatLng={lat:latitude,lng:longitude}; 
     var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Hello World!' 
     }); 

    } 
    </script> 
    </head> 
    <body> 

    <h3>GoogleMaps-Plugin</h3> 
    <div style="width:100%;height:400px" id="map_canvas"></div> 
    <button id="button" onclick="showmap()">Full Screen</button> 
    </body> 
</html> 

u yukarıda gördüğünüz gibi meta etiketi şu vardır: İşte kodudur. Bu yardımcı olur umarım.

İlgili konular