[英]Javascript: Google maps set marker latitude longitude every x seconds?
I'm trying to learn how to move a marker on the google map every x seconds (without refreshing the map or page ofcourse). 我正在尝试学习如何每隔x秒移动google地图上的标记(而不刷新地图或课程页面)。
I have come across quite a few code and tutorials and questions on STO about moving or updating markers but they all want to do it via AJAX. 我在STO上遇到了很多有关移动或更新标记的代码,教程和问题,但他们都希望通过AJAX来完成。
I don't want to do it via AJAX. 我不想通过AJAX做到这一点。
Basically, the lat/long
of the marker gets stored in the localstorage();
基本上,标记的
lat/long
存储在localstorage();
So to move the marker every x seconds, I just need to look inside the localstorage as opposed to call AJAX etc etc... 所以要每x秒移动标记,我只需要查看一下本地存储,而不是调用AJAX等,等等。
The local storage looks something like this: 本地存储如下所示:
var lat = localStorage.getItem("mylat");
var lng = localStorage.getItem("mylng");
and the values of them are just simple string like so: 它们的值只是简单的字符串,如下所示:
51.54647477
0.123383777
So, if I change any of those values locally (NO AJAX), I need teh marker to move or update its location so to speak. 因此,如果我在本地更改了这些值中的任何一个(NO AJAX),那么我就需要标记来移动或更新其位置。
First, is this even possible? 首先,这有可能吗?
MAYBE, USING SETINTERVAL()
?! 也许可以使用
SETINTERVAL()
吗?
If so, could someone please advise on this or point me in the right direction? 如果是这样,有人可以对此提出建议或向我指出正确的方向吗?
Any help would be greatly appreciated. 任何帮助将不胜感激。
EDIT: 编辑:
I think I'm getting somewhere. 我想我要去某个地方。 the issue is that the marker gets removed:
问题是标记被删除:
If I use the lat/long values directly in the code the marker doesn't disappear in it moves but when I use the input value or localstorage valu, the marker disappears. 如果我直接在代码中使用纬度/经度值,则标记不会在其中移动,但是当我使用输入值或本地存储值时,标记会消失。
Works: 作品:
var NewLatLng = new google.maps.LatLng(20.371237, 72.90634);
Doesn't work: 不起作用:
var NewLatLng = new google.maps.LatLng(input);
Another EDIT: 另一个编辑:
This works now but it only moves the marker once and it wont move it again if I edit the inputs values: 现在可以使用,但是它只会移动标记一次,如果我编辑输入值,它将不会再次移动它:
http://jsfiddle.net/wduno9su/5/ http://jsfiddle.net/wduno9su/5/
This works fine now: 现在可以正常工作:
$(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;
});
One option would be to use setInterval
to periodically read the localStorage
and set the marker position (creating the marker if it doesn't exist). 一种选择是使用
setInterval
定期读取localStorage
并设置标记位置(如果不存在则创建标记)。
code snippet: 代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.