我在地图上有谷歌地图有用户的标记。标记在5秒后更新＆amp;显示纬度和经度的真实位置。我有一个侧边栏，其中包含用户标记在地图上的用户名。除了用户名之外，还有一个复选框。现在当我点击复选框时我想要的是那个用户的标记必须显示在地图的中心和如果我检查另一个用户的复选框，那么该用户也会出现在其他用户的中心。如果没有标记检查，那么所有标记都将显示在地图上。
<script>
var iconlink = "http://newgen-bd.com/turzo/images/Turzo.png";
var headiconlink = "http://newgen-bd.com/turzo/images/home.png";
var map;
var markers;
var globalrmark;
var mapMarkers = [];
var headLatLng;
var prevPointMap = [];
var markarMap = [];
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(23.75, 90.3517887),
zoom: 15
});
//var trafficLayer = new google.maps.TrafficLayer();
//trafficLayer.setMap(map);
//Mirpur Head Office Location - 23.7833861,90.3517887
//----
headLatLng = new google.maps.LatLng(23.7833861, 90.3517887);
// 23.755423,90.3741037
var headQuarter = new google.maps.Marker({
position: headLatLng ,
map: map,
title: 'Head Office!',
icon: headiconlink
});
//--Start
var latlngbounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl("<?php echo base_url('clientmap/position')?>", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
prevPointMap[id] = point;
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
//marker resize
var iconresize = {
url: "http://35.202.63.12:3000/marker/"+name, // url
scaledSize: new google.maps.Size(70, 70), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
//marker resize end
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
animation: google.maps.Animation.DROP,
icon : iconresize
//icon : "http://192.168.10.145:3000/marker/"+name
});
//bounds start
// var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(point);
map.fitBounds(latlngbounds);
//bounds end
marker.addListener('click', function(event) {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
map = marker.getMap();
map.setCenter(marker.getPosition()); // set map center to
marker position
smoothZoom(map, 16, map.getZoom());
});
markarMap[id] = marker;
mapMarkers.push(marker);
});//end foreach
});//end download url
//-------end
var counter = 0;
interval = window.setInterval(function() {
counter++;
// just pretend you were doing a real calculation of
// new position along the complex path
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl("<?php echo base_url('clientmap/position')?>",
function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name + " at " + prevPointMap[id]
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
if(id in markarMap){
markarMap[id].setPosition(point);
prevPointMap[id] = point;
}else
{
var marker = new google.maps.Marker({
map: map,
position: prevPointMap[id],
label: icon.label,
animation: google.maps.Animation.DROP,
icon : iconresize
//icon : "http://192.168.10.145:3000/marker/"+name
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
markarMap[id] = marker;
mapMarkers.push(marker);
// marker.setPosition(pos);
markarMap[id].setPosition(point);
prevPointMap[id] = point;
}
});
});
//-------end
if (counter >= 1000*500) {
window.clearInterval(interval);
}
}, 10*500);
} // end of init
//zoom start
function smoothZoom (map, max, cnt) {
if (cnt >= max) {
return;
}
else {
z = google.maps.event.addListener(map, 'zoom_changed',
function(event){
google.maps.event.removeListener(z);
smoothZoom(map, max, cnt + 1);
});
setTimeout(function(){map.setZoom(cnt)},50);
}
}
//zoom end
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < mapMarkers.length; i++) {
mapMarkers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
mapMarkers = [];
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){}
</script>