Javascript：Google地図のマーカーの緯度経度はx秒ごとに設定されますか？

Question

私は毎回Googleマップ上のマーカーを移動する方法を学びたいと思っています（マップやページを更新することなく）。

私は多くのコードとチュートリアル、そしてマーカーの移動や更新について質問しましたが、すべてAJAX経由でやりたいと思っています。

私はAJAXでやりたくありません。

基本的には、マーカーのlat/longだからx秒ごとにマーカーを移動するlocalstorage();

に格納されます、私はちょうど

...対照的に、などなどAJAXを呼び出すためのlocalStorage内部を見る必要があります

ローカルストレージは、このようなものになります。

var lat = localStorage.getItem("mylat"); 
var lng = localStorage.getItem("mylng"); 

をし、それらの値はそのような単純な文字列です：

51.54647477 
0.123383777 

これらの値をローカルに変更すると（NO AJAX）、話すためにその位置を移動または更新するにはマーカーが必要です。

まず、これも可能ですか？

MAYBE、US SETINTERVAL()？！

もしそうなら、誰かがこれについて助言したり、正しい方向に私を指摘してもらえますか？

ご協力いただければ幸いです。

編集：

私はどこかにいると思います。

ここ

が、私はコードに直接緯度/経度の値を使用している場合FIDDLE

マーカーは、それが移動中に消えていないですが、私は入力値を使用する場合、または：問題は、マーカーは削除されるということですマーカーが消えます。

作品：

var NewLatLng = new google.maps.LatLng(20.371237, 72.90634); 

は動作しません：

var NewLatLng = new google.maps.LatLng(input); 

別EDIT：

これが機能するようになりましたが、それは一度だけ、それマーカを移動します入力値を編集するともう一度移動しないでください：

http://jsfiddle.net/wduno9su/5/

これは現在正常に動作します：

$(document).ready(function() { 





    var map; 


     function initialize() 
     { 


      var latlng = new google.maps.LatLng(21.16536,72.79387); 



      var myOptions = { 
       zoom: 5, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 


      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      var marker = new google.maps.Marker 
      (
       { 
        position: new google.maps.LatLng(21.1673643, 72.7851802), 
        map: map, 
        title: 'Click me' 
       } 

      ); 




      var infowindow = new google.maps.InfoWindow({ 
       content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802' 
      }); 
      google.maps.event.addListener(marker, 'click', function() 
      { 
       infowindow.open(map, marker); 
       setTimeout(function(){infowindow.close();}, '5000'); 
      }); 

     //$('#clickme').on('click', function(){ 
     setInterval(function() { 
      var input = $('#input').val(); 
      var input2 = $('#input2').val(); 


      var NewLatLng = new google.maps.LatLng(input, input2); 
      //setInterval(function() { marker.setPosition(NewLatLng);}, 2000); 
      marker.setPosition(NewLatLng); 
    }); 


     } 





     window.onload = initialize; 



    }); 

Answer 1

一つの選択肢は、それが存在しない場合は、定期的にlocalStorageを読んで、マーカーを作成するマーカー位置を（設定するsetIntervalを使用することです）。

proof of concept fiddle

コードスニペット：

var map; 
 
var marker; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
} 
 

 
function setLocalStorage() { 
 
    var lat = document.getElementById('lat').value; 
 
    var lng = document.getElementById('lng').value; 
 
    localStorage.setItem('mylat', lat); 
 
    localStorage.setItem('mylng', lng); 
 
} 
 
setInterval(function() { 
 
    var lat = parseFloat(localStorage.getItem("mylat")); 
 
    var lng = parseFloat(localStorage.getItem("mylng")); 
 
    map.panTo({ 
 
    lat: lat, 
 
    lng: lng 
 
    }); 
 
    if (!marker || !marker.setPosition) { 
 
    marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: lat, 
 
     lng: lng 
 
     }, 
 
     map: map 
 
    }); 
 
    } else { 
 
    marker.setPosition({ 
 
     lat: lat, 
 
     lng: lng 
 
    }); 
 
    } 
 
}, 5000); 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="lat" value="42" /> 
 
<input id="lng" value="-72" /> 
 
<input type="button" onclick="setLocalStorage();" value="click" /> 
 
<div id="map_canvas"></div>