删除上一个标记并在更新的经纬度中添加标记 [英] Remove the previous marker and add marker in the updated lat lng
本文介绍了删除上一个标记并在更新的经纬度中添加标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个每10秒发送一次数据的gps设备。我将数据（lat，lng）保存在MySql数据库中。我从数据库中检索数据并使用xmlHttpRequest（）将这些标记放在这些经度上。我也在10秒内使用setInterval（）来xmlHttpRequest。标记正在被精细地添加，但在刷新whol站点后添加新标记，而不是在xmlhttpreq上10秒后添加。
另外我有两个问题 -
-
My xmlHttpRequest（） 10秒后刷新正常，并获取get_data.php文件，正如我从Network，XHR看到的，但它并未在地图上添加新标记，但xmlHttp在10秒后被请求。我怎样才能更新标记？
-
标记是根据数据库数据添加的，但我不需要很多标记，我只想要一个标记每10秒更新一次位置。所以之前的标记将被删除，新的标记将被添加。我怎样才能做到这一点？以下是我的代码 -
index.html
<！DOCTYPE HTML>
< html>
< head>
< style type =text / css>
＃map-canvas {
height：500px;
}
< / style>
< title> Google地图测试< / title>
< script type =text / javascriptsrc =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（）;
函数makeRequest（url，callback）{
var request;
if（window.XMLHttpRequest）{
request = new XMLHttpRequest（）; // IE7 +，Firefox，Chrome，Opera，Safari
} else {
request = new ActiveXObject（Microsoft.XMLHTTP）; （请求）
if（request.readyState == 4&&& request; // IE6，IE5
}
request.onreadystatechange = function（）{
console.log状态== 200）{
callback（request）;
}
}
request.open（GET，url，true）;
request.send（）;
console.log（请求）
}
函数初始化（）{
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）; （var i =
makeRequest（'get_data.php'，function（data）{
var data = JSON.parse（data.responseText）;
） 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）或die（Error。mysqli_error（$ connection））;
$ sql =select * from locations;
$ result = mysqli_query（$ connection，$ sql）或die（Error in Selecting。mysqli_error（$ connection））;
$ emparray = [];
while（$ row = mysqli_fetch_assoc（$ result））{
$ emparray [] = $ row;
}
echo json_encode（$ emparray）;
mysqli_close（$ connection）;
解决方案
您有两个选择， displayLocation 函数之外的标记：
- 使用引用来移动现有的marker
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）{
//如果标记已经存在，移动它（设置它的位置）
marker.setPosition（location）;
} else {
//创建一个新标记，保留一个引用
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）{
//如果标记已经存在，将其从地图中移除
marker.setMap（null）;
}
//创建一个新的标记，保留一个引用
marker = new google.maps.Marker（{
map：map，
position：position，
title：'test！'
}）;
}
I have a gps device which sends data every 10 seconds. I am saving the data (lat, lng) in the MySql database., I am retrieving the data from the DB and putting the markers on those lat lng using xmlHttpRequest(). I am also using setInterval() to xmlHttpRequest on 10 seconds. The markers are being added finely but new markers are added after refresh the whol site, not after 10 seconds on xmlhttpreq.
Also I have two problems -
My xmlHttpRequest() is refreshing fine after 10 seconds and getting the get_data.php file as i am seeing from Network,XHR but it is not adding new marker on the map, but the xmlHttp is requested after 10 seconds. How can i also update the marker?
Markers are being added according to the DB data but i do not want many markers, i just want one marker which will be updated position every 10 seconds. So the previous marker will be deleted and the new marker will be added. How can i do that? Below is my code -
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);
解决方案
You have two options, both involve keeping a reference to the marker outside of the displayLocation function:
- use the reference to move the existing marker
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!'
});
}
}
- remove the existing marker from the map and create a new one
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!'
});
}
这篇关于删除上一个标记并在更新的经纬度中添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
