删除先前的标记并在更新的 lat lng 中添加标记
Posted
技术标签:
【中文标题】删除先前的标记并在更新的 lat lng 中添加标记【英文标题】：Remove the previous marker and add marker in the updated lat lng 【发布时间】：2015-12-17 05:38:55 【问题描述】：我有一个 GPS 设备，它每 10 秒发送一次数据。我将数据（lat、lng）保存在 mysql 数据库中。我正在从数据库中检索数据并使用 xmlHttpRequest() 将标记放在这些 lat lng 上。我还在 10 秒内使用 setInterval() 到 xmlHttpRequest。标记被很好地添加，但在刷新整个站点后添加新标记，而不是在 xmlhttpreq 上的 10 秒后添加。
我还有两个问题 -
我的 xmlHttpRequest() 在 10 秒后刷新正常，并从 Network,XHR 中看到 get_data.php 文件，但它没有在地图上添加新标记，但 10 秒后请求 xmlHttp .我怎样才能更新标记？
标记正在根据数据库数据添加，但我不想要很多标记，我只想要一个标记，每 10 秒更新一次位置。所以之前的标记将被删除，新的标记将被添加。我怎样才能做到这一点？下面是我的代码 -
index.html
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#map-canvas
height: 500px;
</style>
<title> Google Map Test</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
//var geocoder = new google.maps.Geocoder();
//var infowindow = new google.maps.InfoWindow();
function makeRequest(url, callback)
var request;
if (window.XMLHttpRequest)
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
else
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
request.onreadystatechange = function()
console.log(request)
if (request.readyState == 4 && request.status == 200)
callback(request);
request.open("GET", url, true);
request.send();
console.log(request)
function initialise()
var mapOptions =
center: new google.maps.LatLng(23.7000, 90.3667),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
makeRequest('get_data.php', function(data)
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++)
displayLocation(data[i]);
);
// var myLatLng = lat: 23.7000, lng: 90.3667;
// var marker = new google.maps.Marker(
// map: map,
// position: myLatLng,
// title: 'test!'
// );
setInterval("makeRequest('get_data.php')",10000);
function displayLocation(location)
//var content = '<div class="infoWindow"><strong>' + location.lat +'</strong>'
// + '<br/>' + location.lon + '</div>';
console.log(location.lat)
// location = JSON.parse(location)
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker(
map: map,
position: position,
title: 'test!'
);
// google.maps.event.addListener(marker, 'click', function()
// infoWindow.setContent(content);
// infoWindow.open(map,marker);
// );
</script>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">
initialise();
</script>
</body>
</html>
get_data.php
$connection = mysqli_connect("localhost", "root", "123", "gpsdata") or die("Error " . mysqli_error($connection));
$sql = "select * from locations";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
$emparray = [];
while($row = mysqli_fetch_assoc($result))
$emparray[] = $row;
echo json_encode($emparray);
mysqli_close($connection);
【问题讨论】：
【参考方案1】：您有两个选择，都涉及在 displayLocation 函数之外保留对标记的引用：
-
使用引用移动现有标记
var marker;
function displayLocation(location)
console.log(location.lat)
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
if (marker && marker.setPosition)
// if the marker already exists, move it (set its position)
marker.setPosition(location);
else
// create a new marker, keeping a reference
marker = new google.maps.Marker(
map: map,
position: position,
title: 'test!'
);
-
从地图中移除现有标记并创建一个新标记
var marker;
function displayLocation(location)
console.log(location.lat)
var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
if (marker && marker.setMap)
// if the marker already exists, remove it from the map
marker.setMap(null);
// create a new marker, keeping a reference
marker = new google.maps.Marker(
map: map,
position: position,
title: 'test!'
);
【讨论】：
【参考方案2】：你应该这样做
map.addMarker(new MarkerOptions()
.position(new LatLng(parseFloat(location.lat), parseFloat(location.lng)))
.title("test!"));
在displayLocation函数中
【讨论】：
但我认为这不会删除我以前的标记，对吧？我想做的是只有一个标记，最新的。 那你需要刷新地图。以上是关于删除先前的标记并在更新的 lat lng 中添加标记的主要内容，如果未能解决你的问题，请参考以下文章
如果 lat/lng 为空，要在 lat/lng 数据库字段中添加啥？
从 Postcode DB 获取 lat/lng 并在 PHP/MYSQL 中按最近的顺序排序
隐藏的 'lat' 和 'lng' 字段没有被删除，所以我的脚本仍在搜索来自不正确地理位置的 lat 和 lng 结果