Google地图可移动多个叠加层

Question

实际上，我正在制作一个网页，该网页将通过在Web套接字上使用mqtt从aws-iot接收一些自行车数据，因此自行车图标将出现在地图上。

您可以看到我的整个代码正在运行，但一次只能骑一辆自行车。我的自行车完美地运动和旋转。而且我使用叠加层而不是标记。

var map,Id,Lat=12.989576,Lon=77.704269,Yoda,Alt,Time,customIcon;
var pasLoc=[];
var preLoc=[];
var numDeltas = 100;
var delay = 10; //milliseconds
var i = 0;
var deltaLat;
var deltaLng;
var markers = [];
var position = [];
var angle;
var myLatLng;
var count=0;
var count_1=0;
var htmlMarker;
var data = {
 messages: []
};

function subscribe() {
  var userTyed=document.getElementById("userInput").value;
  client.subscribe(userTyed);
}

(function () {
    var previous;

    $("select[id=userInput]").focus(function () {
        // Store the current value on focus, before it changes
        previous = this.value;
    }).change(function() {
        // Do soomething with the previous value after the change
        client.unsubscribe(previous);
        previous = this.value;
    });
})();


function onMessage(message) {
  data.messages.push(message.payloadString);
  console.log("message received: " + message.payloadString);
  extractFile(message.payloadString);
}

function extractFile(jsondata) 
{
  var ele=document.getElementById("batterState");
  var elem=document.getElementById("bikeState");

  var JsonData = JSON.parse(jsondata);
  Id=parseFloat(JsonData.I);
  var LatLon=JsonData.G;
  Lat=LatLon.split("N")[0];
  Lat=parseFloat(Lat);
  Lon=LatLon.split("N")[1];
  Alt=Lon.split("E")[1]
  Lon=parseFloat(Lon.split("E")[0]);
  Time=parseInt(JsonData.T);
  Yoda=JsonData.Y;

  drop();
  }

  function bearing() {
    var lat1 = pasLoc[0];
    var lon1 = pasLoc[1]
    var lat2 = preLoc[0]
    var lon2 = preLoc[1]

    var point1 = new google.maps.LatLng(lat1, lon1);
    var point2 = new google.maps.LatLng(lat2, lon2);
    angle = google.maps.geometry.spherical.computeHeading(point1,point2);

      i = 0;
      console.log("preLoc: "+preLoc);
      console.log("pasLoc: "+pasLoc);
      deltaLat = ((preLoc[0]) - (pasLoc[0]))/numDeltas;
      console.log("deltaLat: "+deltaLat);
      deltaLng = ((preLoc[1]) - (pasLoc[1]))/numDeltas;
      console.log("deltaLng: "+deltaLng);
      position[0]=pasLoc[0];
      position[1]=pasLoc[1];
      pasLoc=[];
      pasLoc.push(preLoc[0],preLoc[1]);

    preLoc=[];
    moveMarker(angle);

  }

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: {lat: Lat, lng: Lon}
      });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
}

function HTMLMarker(lat, lng, rotation) {
  this.lat = lat;
  this.lng = lng;
  this.rotation = rotation;
  this.pos = new google.maps.LatLng(lat, lng);
}

function drop() {

  HTMLMarker.prototype = new google.maps.OverlayView();
  HTMLMarker.prototype.onRemove = function () {
  div.parentNode.removeChild(div);}

    //Initilize your html element here
    HTMLMarker.prototype.onAdd = function () {
      div = document.createElement('DIV');
      div.style.position='absolute';
      div.style.transform='rotate('+this.rotation +'deg)';
      div.style.MozTransform='rotate('+this.rotation +'deg)';
      div.className = "htmlMarker";
      //image source use your own image in src
      div.innerHTML = customIcon ;
      var panes = this.getPanes();
      panes.overlayImage.appendChild(div);
      this.div=div;
    }

    HTMLMarker.prototype.draw = function () {
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        this.div.style.left = position.x + 'px';
        this.div.style.top = position.y - 30 + 'px';
    }

  if(count_1>0){bearing();}
    count_1++;
  } 

function moveMarker(){

  position[0] += deltaLat;
  position[1] += deltaLng;
  addMarkerWithTimeout();
  if(i!=numDeltas){
      i++;
      setTimeout(moveMarker, delay);
  }
  clearMarkers();

}

function addMarkerWithTimeout( ) {

if(Id==869867034467391){
  htmlMarker = new HTMLMarker(position[0],position[1], angle);

  htmlMarker.setMap(map);
  markers.push(htmlMarker);
 }
  if(Id==869867034467466){
  var htmlMarker1 = new HTMLMarker(position[0]+0.001,position[1]+0.001, angle);
  htmlMarker1.setMap(map);
  markers1.push(htmlMarker1);
 }
  map.setCenter({lat:Lat, lng:Lon});
}

function clearMarkers() {
  if(count>0){
    if(Id==869867034467391){
    var marker=markers[0];
    marker.setMap(null);
    markers.shift();}
    if(Id==869867034467466){
    var marker1=markers1[0];

    marker1.setMap(null);
    markers1.shift();}
   }
count++;
}

enter image description here

创建基于ID的叠加层，并在一个简单的术语中更改该ID的位置，如果想要简单地创建多个自行车并对其进行实时跟踪，则移动标记。

任何帮助将不胜感激！