1 Câu hỏi: Có cách nào để theo dõi nhiều xe đạp cùng một lúc trên google map không? [đóng cửa]

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM
thực tế

Bạn có thể thấy toàn bộ mã của tôi đang hoạt động nhưng chỉ dành cho một chiếc xe đạp tại một thời điểm. Xe đạp của tôi đang di chuyển và xoay hoàn hảo. Và tôi đã sử dụng lớp phủ thay vì điểm đánh dấu.


    <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++;
    } 

là cách tiếp cận của tôi đúng hoặc tôi phải làm một cái gì đó khác. Xin mọi người cho tôi đề nghị của bạn. Tôi cần sự giúp đỡ của bạn.

    
- 4
1 Câu trả lời                              1                         

Xóa marker.setMap(null); khỏi ClearMarkers của bạn.

    
1
2019-05-08 17: 19: 15Z
nguồn đặt đây