仅在动画到达标记位置时显示标记

时间:2019-12-05 13:22:33

标签: reactjs google-maps google-maps-api-3 directions

我已经使用方向服务api创建了一条车辆路线,并在下面提供了代码:

displayRoute(){
    var path = new this.google.maps.MVCArray();
    var service = new this.google.maps.DirectionsService();
    var markers = this.state.markers;
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }

    var wayPoints = [];

    if (markers.length >= 2) {
      this.isContinueRouting = true;

      for (var k = 0, parts = [], max = this.maxWayPointLimit - 1; k < markers.length; k = k + max){
        parts.push(markers.slice(k, k + max + 1));
      }

      var TempParts = [].slice.call(parts);
      var continueRouting = () => {
        if(this.isContinueRouting) {
          if (!TempParts || TempParts.length === 0) return;
          var firstPart = TempParts[0];
          TempParts = TempParts.slice(1);
          wayPoints = [];
          for (var j = 1; j < firstPart.length - 1; j++) {
            wayPoints.push({location: firstPart[j].latLng, stopover: false});
          }
          service.route({
            origin: firstPart[0].latLng,
            destination: firstPart[firstPart.length - 1].latLng,
            waypoints: wayPoints,
            travelMode: this.google.maps.DirectionsTravelMode.DRIVING
          }, (result, status) => {
            if (status === this.google.maps.DirectionsStatus.OK) {
                this.animationPolyLine = new this.google.maps.Polyline({
                  map: this.map,
                  strokeColor: '#4986E7'
                });

                this.animationTraceMarker = new this.google.maps.Marker({
                  map: this.map,
                  icon: "smalltruck.png"
                });

                for (var j = 0, len = result.routes[0].overview_path.length; j < len; j++) {
                  path.push(result.routes[0].overview_path[j]);
                }
                if(TempParts.length === 0) {
                  this.animatePath(this.map, this.animationPolyLine, this.animationTraceMarker, path);
                }
                continueRouting();
            }
          });
        }
      }
      continueRouting();
    }
  }

animatePath(map, route, marker, pathCoords) {
    var index = 0;
    route.setPath([]);
    for (index = 0; index < pathCoords.length; index++)
      setTimeout(function(offset) {
        route.getPath().push(pathCoords.getAt(offset));
        marker.setPosition(pathCoords.getAt(offset));
        map.panTo(pathCoords.getAt(offset));
      }, index * 100, index);
  }

如果我没有隐藏标记,那么一切都很好。但我的要求是标记应默认为隐藏,并且仅在路线到达该点时显示。知道如何实现这种行为吗?

0 个答案:

没有答案