Google地图每隔x秒设置标记纬度和经度

我正在学习如何在谷歌地图上每隔x秒移动一个标记(当然不需要刷新地图或页面)。

我在STO上遇到过不少关于移动或更新标记的代码、教程和问题，但他们都想通过AJAX来完成。

我不想通过AJAX来做。

基本上，标记的lat/long存储在localstorage();

中

为了每隔x秒移动一次标记，我只需要查看本地存储而不是调用AJAX等等。

本地存储看起来像这样:

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

和它们的值只是简单的字符串，像这样:

51.54647477
0.123383777

因此，如果我在本地更改任何这些值(无AJAX)，我需要标记移动或更新其位置。

首先，这可能吗?

也许，用SETINTERVAL() ?!

如果是这样，有没有人能给我一些建议或者给我指出正确的方向?

任何帮助都将是非常感激的。

编辑:

我想我有点进展了。问题是标记被删除了:

Here is a FIDDLE

如果我在代码中直接使用lat/long值，标记不会在移动时消失，但当我使用输入值或本地存储值时，标记会消失。

:

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

行不通:

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

另一个编辑:

现在可以工作了，但它只移动了一次标记，如果我编辑输入值，它不会再移动它:

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;

    });

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>