Wie füge ich ein Textfeld in google maps route hinzu?

Question

Ich muß aa Textfeld zwischen den Routenanweisungen wie hier erstellen:

Für Start i Tooltip hinzufügen dachte ... aber ich kann sie in der Mitte der Route nicht platzieren wie auf dem Bild, oder stellen Sie seine Position relativ.

Answer 1

Sie können eine benutzerdefinierte Overlay erstellen, wie in der Dokumentation beschrieben:

https://developers.google.com/maps/documentation/javascript/customoverlays

Der Code-Schnipsel Probe

sein könnte

function routeOverlay(point, map, content) { 
    this._point = point; 
    this._map = map; 

    this.div_ = null; 
    this._cnt = content; 

    this.setMap(map); 
}  
routeOverlay.prototype = new google.maps.OverlayView(); 

routeOverlay.prototype.onAdd = function() { 
    var div = document.createElement('div'); 
    div.style.borderStyle = 'solid'; 
    div.style.borderWidth = '1px'; 
    div.style.backgroundColor = 'white'; 
    div.style.position = 'absolute'; 
    div.style.padding = '4px'; 
    div.style.zIndex = 1000; 
    div.innerHTML = this._cnt; 

    this.div_ = div; 

    // Add the element to the "overlayLayer" pane. 
    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
} 

routeOverlay.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 
    var p = overlayProjection.fromLatLngToDivPixel(this._point); 
    this.div_.style.left = p.x + 'px'; 
    this.div_.style.top = p.y + 'px'; 
} 

routeOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
} 

routeOverlay.prototype.hide = function() { 
    if (this.div_) { 
    // The visibility property must be a string enclosed in quotes. 
    this.div_.style.visibility = 'hidden'; 
    } 
}; 

routeOverlay.prototype.show = function() { 
    if (this.div_) { 
    this.div_.style.visibility = 'visible'; 
    } 
}; 

Später Sie Sie das Overlay erstellen Code sollte. Zum Beispiel:

if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    var ind = (response.routes[0].overview_path.length - response.routes[0].overview_path.length % 2)/2; 
    var rover = new routeOverlay(response.routes[0].overview_path[ind], map, 'Add your HTML here'); 
    rover.show(); 
} else { 
    window.alert('Directions request failed due to ' + status); 
} 

Ich habe Ihre jsfiddle geändert: http://jsfiddle.net/h54tmmcb/14/

Sie erstellen sollten Stile und entsprechende Inhalte für das Overlay entspricht.

Hoffe, das hilft!