Javascript: Google Maps setzen Marker Breite Länge alle x Sekunden?

Question

Ich versuche zu lernen, wie man einen Marker auf der Google Map alle x Sekunden bewegt (ohne die Karte oder Seite natürlich zu aktualisieren).

Ich bin ziemlich viel Code und Tutorials und Fragen über STO über Verschieben oder Aktualisieren von Markern gekommen, aber sie alle wollen es über AJAX tun.

Ich möchte es nicht über AJAX tun.

Grundsätzlich ist die lat/long des Markers in den so

localstorage();

gespeichert wird die Markierung alle x Sekunden zu bewegen, ich brauche nur innerhalb der localstorage zu suchen, im Gegensatz AJAX zu nennen etc etc ...

Die lokale Speicherung sieht ungefähr so ​​aus:

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

und die Werte von ihnen sind nur einfache Zeichenfolge wie folgt:

51.54647477 
0.123383777 

Also, wenn ich einen dieser Werte lokal ändern (NEIN AJAX), brauche ich den Marker, um seine Position sozusagen zu bewegen oder zu aktualisieren.

Erstens, ist das überhaupt möglich?

VIELLEICHT, MIT SETINTERVAL()?!

Wenn ja, könnte jemand bitte hierauf hinweisen oder mich in die richtige Richtung weisen?

Jede Hilfe würde sehr geschätzt werden.

EDIT:

Ich glaube, ich bin immer irgendwo. das Problem ist, dass die Markierung entfernt wird:

Hier ist ein FIDDLE

Wenn ich die lat/long-Werte direkt im Code der Markierung verschwindet nicht verwenden darin bewegt, aber wenn ich den Eingangswert verwenden oder Lokalspeicherwert, verschwindet der Marker.

Works:

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

funktioniert nicht:

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

Ein weiterer EDIT:

Das funktioniert jetzt, aber es bewegt sich nur die Markierung einmal und es Ich werde es nicht erneut verschieben, wenn ich die Eingabewerte editiere:

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

Dies funktioniert jetzt:

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

Eine Option setInterval wäre die Verwendung in regelmäßigen Abständen die localStorage und stellen Sie die Markierungsposition lesen (die Markierung zu schaffen, wenn es nicht vorhanden ist).

proof of concept fiddle

Code-Schnipsel:

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>