我已经使用方向服务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);
}
如果我没有隐藏标记,那么一切都很好。但我的要求是标记应默认为隐藏,并且仅在路线到达该点时显示。知道如何实现这种行为吗?