2016-09-20 4 views
0

私はcordovaを使って、watchPosition()メソッドを使ってデバイスの位置を調べています。私は位置を正常に取得できますが、 私はwatchposition()の緯度と経度の値をGoogleマップに渡したいと思います。どうやってやるの?mapにwatchposition lat lonを表示するにはどうすればいいですか?

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 }); 
     } 
    }); 

答えて

1

このようなあなたのマーカーの位置を更新:

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

    // Center map 
    map.setCenter(pos); 

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

これはあなたの緯度と経度を通過して、Googleマップを表示するためのJavaScriptです。あなたのonSuccessイベントハンドラで

 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); 
関連する問題