我正在使用jquery mobile进行一个phonegap项目。我是谷歌地图api的新手。我能够从json获得一系列标记并将其显示在地图上。我使用SetInterval函数从我的数据库中获取更新的纬度和经度。 问题是标记因为setInterval函数而保持重叠。我从stackoverflow找到一个解决方案来删除重复的标记，但现在我在我的数据库中有两个标记但是这里只显示一个标记。我想更新这两个标记而不重复。 我的代码到现在为止（仅适用于一个标记）
setInterval(function () {
$.ajax({
url: "http://dbmysite.net/getlatlongdriver.php",
type: "post",
dataType: 'json',
success: function (data, status) {
$.mobile.loading('hide');
$.each(data, function (i, item) {
$.each(data, function (i, item) {
/* add a marker for each location in response data */
addMarker(item.latitude, item.longitude, item.username);
console.log(item.username, item.latitude, item.longitude);
});
});
},
error: function () {
$.mobile.loading('hide');
alert('unexpected error<br>try again later');
}
});
}, 1000);
function addMarker(lat, lng, username) {
var labels = {
text: username,
color: 'black',
fontSize: '40'
};
var icons = {
url: "../www/img/marker.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var latlon = {
lat: parseFloat(lat),
lng: parseFloat(lng)
}
if (marker && marker.setMap) {
// if the marker already exists, remove it from the map
marker.setMap(null);
}
// create a new marker
marker = new google.maps.Marker({
map: map,
position: {
lat: parseFloat(lat),
lng: parseFloat(lng)
},
label: labels,
// icon: icons,
title: name
});
google.maps.event.addListener(marker, 'click', function (event) {
map.panTo(this.getPosition());
map.setZoom(16);
}.bind(marker));
}
答案 0 :(得分：0)
var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () {
$.ajax({
url: "http://quickexample.com/FindMyRide/getlatlongdriver.php",
type: "post",
dataType: 'json',
success: function (response) {
$.mobile.loading('hide');
$.each(response, function (i, item) {
$.each(response, function (i, item) {
/* add a marker for each location in response data */
var lat = item.latitude;
var lng = item.longitude;
update_map(response, item.latitude, item.longitude);
});
});
},
error: function () {
$.mobile.loading('hide');
alert('unexpected error<br>try again later');
}
});
}, 3000);
update_map = function (data, lat, lng) {
var icon = {
url: "../www/img/marker.png", // url for custom marker
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var bounds = new google.maps.LatLngBounds();
// delete all existing markers first
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers = [];
// add new markers from the JSON data
for (var i = 0, length = data.length; i < length; i++) {
latLng = new google.maps.LatLng(data[i].latitude, data[i].longitude);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: icon,
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.username + "<br>" + marker.getPosition().toUrlValue(6));
infoWindow.open(map, marker);
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.username + "<br>" + marker.getPosition().toUrlValue(6));
infoWindow.open(map, marker);
});
})(marker, data[i]);
gmarkers.push(marker);
}
};
function initialize() {
// initialize the map on page load.
var mapOptions = {
center: new google.maps.LatLng(19.1254, 72.9992),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// add the markers to the map if they have been loaded already.
if (gmarkers.length > 0) {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);