Javascript：Google地圖每x秒設置標記緯度經度嗎？

Question

我正在嘗試學習如何每隔x秒移動google地圖上的標記（而不刷新地圖或課程頁面）。

我在STO上遇到了很多有關移動或更新標記的代碼，教程和問題，但他們都希望通過AJAX來完成。

我不想通過AJAX做到這一點。

基本上，標記的lat/long存儲在localstorage();

所以要每x秒移動標記，我只需要查看一下本地存儲，而不是調用AJAX等，等等。

本地存儲如下所示：

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

它們的值只是簡單的字符串，如下所示：

51.54647477
0.123383777

因此，如果我在本地更改了這些值中的任何一個（NO AJAX），那么我就需要標記來移動或更新其位置。

首先，這有可能嗎？

也許可以使用SETINTERVAL()嗎？

如果是這樣，有人可以對此提出建議或向我指出正確的方向嗎？

任何幫助將不勝感激。

編輯：

我想我要去某個地方。 問題是標記被刪除：

這里是一個FIDDLE

如果我直接在代碼中使用緯度/經度值，則標記不會在其中移動，但是當我使用輸入值或本地存儲值時，標記會消失。

作品：

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;



    });

Answer 1

一種選擇是使用setInterval定期讀取localStorage並設置標記位置（如果不存在則創建標記）。

概念證明

代碼段：

 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>