2015-12-21 84 views
0
<html> 
<head> 
    <title>Geolocation watchPosition() by The Code of a Ninja</title> 

    <!-- for mobile view --> 
    <meta content='width=device-width, initial-scale=1' name='viewport'/> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> 
    <script type="text/javascript"> 

     // you can specify the default lat long 
     var map, 
      currentPositionMarker, 
      mapCenter = new google.maps.LatLng(14.668626, 121.24295), 
      map; 

     // change the zoom if you want 
     function initializeMap() 
     { 
      map = new google.maps.Map(document.getElementById('map_canvas'), { 
       zoom: 18, 
       center: mapCenter, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 
     } 

     function locError(error) { 
      // tell the user if the current position could not be located 
      alert("The current position could not be found!"); 
     } 

     // current position of the user 
     function setCurrentPosition(pos) { 
      currentPositionMarker = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(
        pos.coords.latitude, 
        pos.coords.longitude 
       ), 
       title: "Current Position" 
      }); 
      map.panTo(new google.maps.LatLng(
        pos.coords.latitude, 
        pos.coords.longitude 
       )); 
     } 

     function displayAndWatch(position) { 

      // set current position 
      setCurrentPosition(position); 

      // watch position 
      watchCurrentPosition(); 
     } 

     function watchCurrentPosition() { 
      var positionTimer = navigator.geolocation.watchPosition(
       function (position) { 
        setMarkerPosition(
         currentPositionMarker, 
         position 
        ); 
       }); 
     } 

     function setMarkerPosition(marker, position) { 
      marker.setPosition(
       new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude) 
      ); 
     } 

     function initLocationProcedure() { 
      initializeMap(); 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 
      } else { 
       // tell the user if a browser doesn't support this amazing API 
       alert("Your browser does not support the Geolocation API!"); 
      } 
     } 

     // initialize with a little help of jQuery 
     $(document).ready(function() { 
      initLocationProcedure(); 
     }); 
    </script> 
</head> 

<body style="margin:0; padding:0;"> 

    <!-- display the map here, you can changed the height or style --> 
    <div id="map_canvas" style="height:25em; margin:0; padding:0;"></div> 
</body> 

</html> 

這在我的智能手機上運行它的谷歌地圖將不會出現,但是當我在本地主機上運行它,它不會出現在地圖上,也能得到當前的位置上面的代碼有人可以幫助顯示谷歌地圖我解決發生了什麼的PhoneGap不會在手機

<html> 
    <head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script type="text/javascript"> 

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 8 
    }); 
} 

    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html> 

當我運行這段代碼就能夠出現在智能手機上的谷歌地圖,我不知道什麼是錯的,我如此混淆,現在任何人都可以幫我

回答

相關問題