2015-12-21 3 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> 

Приведенный выше код, который запустить его на моем смартфоне карта Google обыкновение появляться, но когда я запускаю его на локальном хосте он появляется на карте, а также возможность получить текущее местоположение кто может помочь мне решить, что происходитPhoneGap обыкновение отображать карту Google в телефоне

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

Когда я запускаю этот код он сможет появиться на карте Google в смартфоне я понятия не имел, что это неправильно я так запутать сейчас может кто-нибудь помочь мне

ответ

0

Вам нужно для получения ключа API Google:

https://developers.google.com/api-client-library/python/guide/aaa_apikeys

, а затем заменить YOUR_API_KEY с ключом API в тэгом:

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

Я был попробовать без ключа апи и нижний еще работают charmly но выше один не может работать ни малейшего представления, почему – user3711175

Смежные вопросы