我如何在地图上显示手表位置纬度

Question

i am using cordova to find out the device position using watchPosition() method. i am able to retrieve the positions successfully but i want to pass on the watchposition()'s latitude and longitude values to google maps. how can i do that?

index.html

<div id="map"></div>
<script>
  var map;
  function initMap() {
    var myLatLng = {
        //here the lat and lon should update on intervals
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>

app.js

$("#getGeolocation").on('click', function(){
        document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {          
               function onSuccess(position) {
                    var element = document.getElementById('geolocation');
                    element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
                                        'Longitude: ' + position.coords.longitude     + '<br />' +
                                        '<hr />'      + element.innerHTML;
                }

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

                var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 3000 });
        }
    });

Answer 1

In your onSuccess event handler update the location of your marker like this:

function onSuccess(position) {
   var pos = {
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
   };

   // Center map
   map.setCenter(pos);

   // Update marker position
   marker.setPosition(pos);
}

Answer 2

this is the javascript to display google map by passing your longitude and latitude.

     var myLatlng = new google.maps.LatLng(-34.397, 150.644);
              var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);