删除标记 - 谷歌 Map - JavaScript

Question

我有以下代码，但是当添加新标记时我想删除旧标记请帮助我我搜索了很多资源，但不幸的是我没有得到它们

 var map;

var center = new google.maps.LatLng(45.567846, 25.396878);

var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();

function init() {

var mapOptions = {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var  timerId = setInterval( function(){

makeRequest('GPS/get_locations.php', function(data) {

var data = JSON.parse(data.responseText);

for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});

}, 2000);

}


function displayLocation(location) {

var content =   '<div class="infoWindow"><strong>'
+ location.branch +" "+ location.serial
+ '</strong>'

+ '<br/>'     +"User: "+ location.user
// + '<br/>'     +"Serial: "+ location.serial
+ '<br/>'     +"Date: "+ location.date
+ '<br/>'     +"Time: "+ location.time 
+ '<br/>'     +"Lat: "+ location.lat 
+ '<br/>'     +"Lng: "+ location.lng +'</div>'
+ '<br/>'     +"Speed: "+ location.speed +'</div>';
// + '<br/>'     +"Credit: "+ location.credit +'</div>'
// + '<br/>'     +"Charge: "+ location.charge +'</div>';


if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {

var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});

/* Save geocoding result to the Database
var url =   'set_coords.php?id=' + location.id
+ '&amp;lat=' + results[0].geometry.location.lat()
+ '&amp;lon=' + results[0].geometry.location.lng();

makeRequest(url, function(data) {
if (data.responseText == 'OK') {
// Success
}
});*/
}
});
} else {

var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
}

var  timerId = setInterval( function(){
init();
}, 60000);

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() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
//]]>

我有以下代码，但是当添加新标记时我想删除旧标记请帮助我我搜索了很多资源，但不幸的是我没有得到它们

Answer 1

解决方案很简单。 在 function displayLocation() 之外将您的标记变量声明为 null：

变量标记 = null

然后添加这个条件：

//Your code//
/////////////
if (marker != null){
  marker.setMap(null)
}
marker = new google.maps.Marker({
  map: map,
  position: position,
  title: location.name
});
/////Your rest of the code//////

完整代码在这里：

var map;
var marker = null;
var center = new google.maps.LatLng(45.567846, 25.396878);

var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();

function init() {

var mapOptions = {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var  timerId = setInterval( function(){

makeRequest('GPS/get_locations.php', function(data) {

var data = JSON.parse(data.responseText);

for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});

}, 2000);

}


function displayLocation(location) {

var content =   '<div class="infoWindow"><strong>'
+ location.branch +" "+ location.serial
+ '</strong>'

+ '<br/>'     +"User: "+ location.user
// + '<br/>'     +"Serial: "+ location.serial
+ '<br/>'     +"Date: "+ location.date
+ '<br/>'     +"Time: "+ location.time 
+ '<br/>'     +"Lat: "+ location.lat 
+ '<br/>'     +"Lng: "+ location.lng +'</div>'
+ '<br/>'     +"Speed: "+ location.speed +'</div>';
// + '<br/>'     +"Credit: "+ location.credit +'</div>'
// + '<br/>'     +"Charge: "+ location.charge +'</div>';


if (parseInt(location.lat) == 0) {
geocoder.geocode( { 'address': location.address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {

if (marker != null){
  marker.setMap(null)
}
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.name
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});

/* Save geocoding result to the Database
var url =   'set_coords.php?id=' + location.id
+ '&amp;lat=' + results[0].geometry.location.lat()
+ '&amp;lon=' + results[0].geometry.location.lng();

makeRequest(url, function(data) {
if (data.responseText == 'OK') {
// Success
}
});*/
}
});
} else {

var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));

if (marker != null){
   marker.setMap(null)
 }
marker = new google.maps.Marker({
map: map,
position: position,
title: location.name
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map,marker);
});
}
}

var  timerId = setInterval( function(){
init();
}, 60000);

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() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
//]]>