Question

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

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


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

我的方法正确吗，或者我必须做其他事情。请大家给我您的建议。我需要你的帮助。

Answer 1

从您的clearMarkers中删除marker.setMap(null);。

有什么方法可以同时在Google地图上跟踪多辆自行车吗？

1 个答案: