Question

我试图学习如何每隔x秒在谷歌地图上移动一个标记（不刷新地图或页面）。

我在STO上遇到了很多有关移动或更新标记的代码和教程以及问题，但他们都希望通过AJAX来实现。

我不想通过AJAX这样做。

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

中

所以要每隔x秒移动一次标记，我只需要查看localstorage，而不是调用AJAX等...

本地存储看起来像这样：

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

，它们的值只是简单的字符串，如下所示：

51.54647477
0.123383777

所以，如果我在本地更改任何这些值（NO AJAX），我需要标记来移动或更新它的位置。

首先，这是否可能？

可能，使用SETINTERVAL()？！

如果是这样，有人可以就此提出建议或指出我正确的方向吗？

非常感谢任何帮助。

编辑：

我想我到了某个地方。问题是标记被删除了：

这是FIDDLE

如果我直接在代码中使用lat / long值，则标记不会消失，但是当我使用输入值或localstorage值时，标记会消失。

使用：

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并设置标记位置（如果标记不存在则创建标记）。

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>

Javascript：谷歌地图每隔x秒设置标记纬度经度？

1 个答案: