1 Soalan: Adakah terdapat cara untuk mengesan beberapa basikal pada masa yang sama di peta google? [ditutup]

soalan dicipta di Wed, May 8, 2019 12:00 AM
Sebenarnya, saya membuat webPage yang akan menerima beberapa data basikal dari aws dengan menggunakan mqtt melalui soket web dan ikon basikal yang sewajarnya akan muncul di peta.

Anda boleh melihat keseluruhan kod saya yang berfungsi tetapi hanya untuk satu basikal pada satu masa. Basikal saya bergerak dan berputar dengan sempurna. Dan saya menggunakan overlay bukan penanda.


    <script type="text/javascript">

    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( ) {

      htmlMarker = new HTMLMarker(position[0],position[1], angle);
      htmlMarker.setMap(map);
      markers.push(htmlMarker);
      map.setCenter({lat:Lat, lng:Lon});
    }

    function clearMarkers() {
        if(count>0){
          var marker=markers[0];
          marker.setMap(null);
          markers.shift();
         }
      count++;
    } 

adalah pendekatan saya betul atau saya perlu melakukan sesuatu yang lain. Tolong berikan saya cadangan awak. Saya perlukan bantuan anda.

    
- 4
1 Jawapan                              1                         

Alih keluar marker.setMap(null); dari ClearMarkers anda.

    
1
2019-05-08 17: 19: 15Z
sumber diletakkan di sini