我需要o建立一个屏幕，根据数据库中的纬度和经度显示车辆位置。
我在地图上有一个div：
"<div id='map' style='width:100%; height:100%'></div>"
以及用于填充屏幕的JavaScript：
"<script src='https://maps.googleapis.com/maps/api/js?key=" + Site.GoogleMapAPIKey +
"&v=3.exp&libraries=geometry, places&language=en®ion=UK'></script>
<script>
var markers = [];
var events = [];
var map, GPSPath, GPSPathBorder, line, border
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: 'terrain'
});
var Polyline = [];
if('" + PolylineJson + "')
{
Polyline = JSON.parse('" + PolylineJson + "');
}
for (i = 0; i < Polyline.length; i++)
{
var encoded_data = unescape(Polyline[i]);
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
border = new google.maps.Polyline({
path: decode,
strokeColor: getRandomColor(),
strokeOpacity: 0.8,
strokeWeight: 7,
zIndex: 2
});
border.setMap(map);
line = new google.maps.Polyline({
path: decode,
strokeColor: getRandomColor(),
strokeOpacity: 0.8,
strokeWeight: 5,
zIndex: 3
});
line.setMap(map);
}
var GPSCoordinates = [" + GPSPolygons + "];
GPSPathBorder = new google.maps.Polyline({
path: GPSCoordinates,
geodesic: true,
strokeColor: '#BF360C',
strokeOpacity: 0.8,
strokeWeight: 7,
zIndex: 2
});
GPSPathBorder.setMap(map);
GPSPath = new google.maps.Polyline({
path: GPSCoordinates,
geodesic: true,
strokeColor: '#FF5722',
strokeOpacity: 0.8,
strokeWeight: 5,
zIndex: 3
});
GPSPath.setMap(map);
var Trucks = [" + LastMarker + "];
for (i = 0; i < Trucks.length; i++)
{
LastPosition = new google.maps.Marker({
position: new google.maps.LatLng(Trucks[i][0],Trucks[i][1]),
icon: {
path: '" + Path + "',
rotation:Trucks[i][2],
id:Trucks[i][3],
fillColor: '#000000',
fillOpacity: 1,
scale: .025,
anchor: new google.maps.Point(200, 500)
},
map: map
});
LastPositioni = new google.maps.Marker({
position: new google.maps.LatLng(Trucks[i][0],Trucks[i][1]),
icon: {
path: '" + PathInside + "',
rotation:Trucks[i][2],
id:Trucks[i][3],
fillColor: '" + Site.MainColor + "',
fillOpacity: 1,
scale: .025,
anchor: new google.maps.Point(200, 500)
},
map: map
});
}
var BreakStartCoor = [" + StartBreak + "];
for (i = 0; i < BreakStartCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakStartCoor[i][1], BreakStartCoor[i][2]),
icon: {
url : '/Routilogix/img/breakStart.png'
},
map: map
});
events.push(marker);
}
var BreakEndCoor = [" + EndBreak + "];
for (i = 0; i < BreakEndCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakEndCoor[i][1], BreakEndCoor[i][2]),
icon: {
url : '/Routilogix/img/breakEnd.png'
},
map: map
});
events.push(marker);
}
var BreakDownCoor = [" + BreakDown + "];
for (i = 0; i < BreakDownCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakDownCoor[i][1], BreakDownCoor[i][2]),
icon: {
url : '/Routilogix/img/breakdown.png'
},
map: map
});
events.push(marker);
}
var DelayCoor = [" + Delay + "];
for (i = 0; i < DelayCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(DelayCoor[i][1], DelayCoor[i][2]),
icon: {
url : '/Routilogix/img/delay.png'
},
map: map
});
events.push(marker);
}
var TipCoor = [" + Tip + "];
for (i = 0; i < TipCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(TipCoor[i][1], TipCoor[i][2]),
icon: {
url : '/Routilogix/img/tip.png'
},
map: map
});
events.push(marker);
}
var infowindow = new google.maps.InfoWindow();
var marker, i;
bounds = new google.maps.LatLngBounds();
var userCoor = [" + Markers + "];
for (i = 0; i < userCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1.0,
fillColor: userCoor[i][5],
scale: 5,
strokeWeight: 2
},
map: map
});
markers.push(marker);
markerLbl = new google.maps.Marker ({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
//label: userCoor[i][3],
label: {
text: userCoor[i][3],
color: 'black',
fontSize: '10px'
},
map: map
});
markers.push(markerLbl)
loc = new google.maps.LatLng(userCoor[i][1], userCoor[i][2]);
bounds.extend(loc);
google.maps.event.addListener(markerLbl, 'click', (function(markerLbl, i) {
return function() {
infowindow.setContent(userCoor[i][0] + '<br>' + '<strong>ETA: </strong>' + userCoor[i][4]);
infowindow.open(map, markerLbl);
}
})(markerLbl, i));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(userCoor[i][0] + '<br>' + '<strong>ETA: </strong>' + userCoor[i][4]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function toggleMarkers() {
if (markers[0].getMap() != null) {
var arg = null;
} else {
var arg = map;
}
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(arg);
}
}
function toggleGPSPath() {
if (GPSPath.getMap() != null) {
GPSPath.setMap(null);
GPSPathBorder.setMap(null);
} else {
GPSPath.setMap(map);
GPSPathBorder.setMap(map);
}
}
function toggleLine() {
if (line.getMap() != null) {
line.setMap(null);
border.setMap(null);
} else {
line.setMap(map);
border.setMap(map);
}
}
function toggleEvents() {
if (events[0].getMap() != null) {
var arg = null;
} else {
var arg = map;
}
for (var i = 0; i < events.length; i++) {
events[i].setMap(arg);
}
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
function updatePolyline(newLat,newLng, vehicleId)
{
var pathBorder = GPSPathBorder.getPath();
var path = GPSPath.getPath();
pathBorder.push(new google.maps.LatLng(newLat, newLng, vehicleId));
path.push(new google.maps.LatLng(newLat, newLng, vehicleId));
GPSPathBorder.setPath(pathBorder);
GPSPath.setPath(path);
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function animatedMove(marker, t, current, latitude, longitude, rotation) {
var lat = current.lat();
var lng = current.lng();
var deltalat = (latitude - current.lat()) / 100;
var deltalng = (longitude - current.lng()) / 100;
// var deltalat = (moveto.lat() - current.lat()) / 100;
// var deltalng = (moveto.lng() - current.lng()) / 100;
var delay = 10 * t;
for (var i = 0; i < 100; i++) {
(function(ind) {
setTimeout(
function() {
var lat = marker.position.lat();
var lng = marker.position.lng();
lat += deltalat;
lng += deltalng;
latlng = new google.maps.LatLng(lat, lng);
marker.setPosition(latlng);
var icon = marker.getIcon();
icon.rotation = rotation;
marker.setIcon(icon);
}, delay * ind
);
})(i)
}
}
initMap()
</script>"
我使用此功能不时更新屏幕：
"<script>
setInterval(
function () {
document.getElementById('" + Live.Id + "').click();
}, 5000);
</script>"
最后，我调用下面的javascript函数来更新位置：
"updatePolyline(" + Live_GPS.List.Current.GPSCoordinates.Latitude + "," + Live_GPS.List.Current.GPSCoordinates.Longitude + "," + Live_GPS.List.Current.VehicleId.Value + ")"
我的疑问是，我是否要使用VehicleId创建对象并正确地使用VehicleId调用更新函数，因为它只会更新添加到屏幕上的最后一个对象的位置，所以我会忽略ID。
LastMarker："[" + GPSDesc.List[0].GPSCoordinates.Latitude + "," + GPSDesc.List[0].GPSCoordinates.Longitude + "," + GPSDesc.List[0].Heading.Value + ",""" + GetRoutes2.List.Current.RouteVehicle.VehicleId + """]"
糟糕。我正在使用Outsystems。