Question

所以我在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>

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

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

地理定位应用程序无法正常工作

1 个答案: