多重标记Google地图

Question

我需要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&region=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。