有一个asp.net网络表单,用于显示谷歌地图中移动物体的位置。根据给定的时间间隔,它从数据库中获取对象的当前位置,并在地图上更新它。
一切正常。但是每个时间间隔它会在之前的标记之上添加相同的标记。我想在从数据库中获取当前数据之前清除地图上的标记。我在调用当前值之前使用了markers.setMap(null)。然后它不会在地图上显示任何标记。任何帮助将不胜感激。
window.onload = function () {
LoadGoogleMap();
}
var markers = [];
var map;
function LoadGoogleMap() {
markers = GetMapData();
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 5000);
}
function SetMarker() {
//markers.setMap(null)
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm4.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}
答案 0 :(得分:1)
我发现答案如下......
<script type="text/javascript">
window.onload = function () {
LoadGoogleMap();
}
var markers;
var map;
var markers1 = [];
function LoadGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng('6.894373', '79.857963'),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 3000);
}
function SetMarker() {
for (i = 0; i < markers1.length; i++) {
markers1[i].setMap(null);
}
markers1 = [];
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
markers1.push(marker);
//var infoWindow = new google.maps.InfoWindow();
//infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>");
//infoWindow.open(map, marker);
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm5.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}
</script>