[英]Update map marker without refreshing page - Leaflet
我这里有个情况。 我正在尝试使用传单Javascript库在在线地图上显示主题的当前位置。 我的网站有两页。 第1页显示地图,第2页输入对象的当前位置并相应地设置地图。 我正在使用蓝色标记在地图上显示主题位置。 如果我加载Page-1,标记会正确显示,但是如果我更新Page-2上的位置,则在页面1上的地图上不会更新主题的位置。
这是我的Page-1代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<h1></h1>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" href="CSS/mystyle.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="SCRIPT/jquery-1.9.1.js"></script>
<script src="SCRIPT/myscript.js"></script>
</head>
<body onload="LoadMap()">
<h2>Current location:</h2>
<table border="1" id="currentloc_table">
<tr>
<th>Name</th>
<th>IMEI</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
<tr>
<td>Azeem HTC Device</td>
<td>357710043411902</td>
<td></td>
<td></td>
</tr>
</table>
<br/><br/>
<div id="map"></div>
</body>
</html>
这是myscript.js
的代码:
var map;
var marker;
function LoadMap()
{
$.ajax({
url: "../Database/getcurrentlocation.php?deviceId=357710043411902",
success: function(data){
if(data!=null)
{
var dataArray = data.split(/~/);
SetMap(dataArray[0],dataArray[1]);
}
}
});
setTimeout(function(){LoadMap();},10000);
}
function SetMap(lati,longi)
{
var loc_table = document.getElementById('currentloc_table');
loc_table.rows[1].cells[2].innerHTML = lati;
loc_table.rows[1].cells[3].innerHTML = longi;
map = L.map('map').setView([lati, longi], 12);
L.tileLayer('http://{s}.tile.cloudmade.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
attribution: '',
maxZoom: 18
}).addTo(map);
marker = L.marker([lati, longi]).addTo(map);
}
重新加载页面时,地图会更新。 但是我可以在不执行第1页刷新的情况下以新位置更新地图吗?
谢谢
刚放
setTimeout(function(){LoadMap();},10000);
在LoadMap函数之外
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.