地理定位应用程序不工作答案

【问题标题】：Geolocation App not working地理定位应用程序不工作
【发布时间】：2016-04-09 02:51:27
【问题描述】：

所以我有这个 HTML5 和 Javascript 格式的地理定位应用示例，它应该在谷歌地图上显示用户的当前位置。出于某种原因，即使我的所有隐私设置都已启用，我也无法使其正常工作。在我的浏览器和我的 Cordova 预览中，该页面仍被阻止跟踪我的位置。我从https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api 获得了示例代码，当我单击网页上的链接时，示例应用程序在其中工作。任何想法为什么这不起作用？代码如下：

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

【问题讨论】：

你在使用 geolocation cordova 插件吗？

标签： javascript ios html cordova geolocation

【解决方案1】：

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

你没有提到网址白名单，你可以在上面看到的元标记有。希望这会有所帮助。

【讨论】：