Mapbox GL Routenplaner Plugin Suche Suche Herkunft Ziel-Box

Question

Ich verwende Mapbox GL Routenplaner Plugin in meiner App, wo ich den Ursprung auf der Karte laden und setzen Fahrziel auf Benutzer klicken Sie auf einen beliebigen Ort auf der Karte. Ich versuche jetzt, die obere linke Suche Herkunft/Ziel-Box zu entfernen, aber nach umfangreicher Forschung kann nicht herausfinden, wie man das macht, kann jemand bitte helfen, indem er mir sagt, wie man das macht? Vielen Dank.

Code I unten in meiner app bin mit:

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8', 
    center: [userCoordinates.coords.longitude, userCoordinates.coords.latitude], 
    zoom: 15 
}); 


var directions = new mapboxgl.Directions({ 
    unit: 'metric', 
    profile: 'driving'   
}); 

map.addControl(directions); 



directions.setOrigin([userCoordinates.coords.longitude, userCoordinates.coords.latitude]); 


map.on('click', function(e) { 

    var features = map.queryRenderedFeatures(e.point, { layers: ['gsLayer'] }); 
    if (!features.length) { 
    return; 
    } 
    var feature = features[0]; 

    directions.setDestination([feature.geometry.coordinates[0], feature.geometry.coordinates[1]]); 

}); 

Answer 1

Ich nehme an, Sie MapBox GL Javascript verwenden, und suchen Sie in this example es erscheint map.addControl(new mapboxgl.Directions()); ist, was die Steuerung erweitert. In deinem Code hast du dir auch diese map.addControl(directions); gegeben. Versuchen Sie es zu entfernen und sehen Sie, was passiert.

Hoffe, das hilft!

Answer 2

Ich konnte das auch nicht herausfinden, da es keine Dokumentation gibt, aber schließlich habe ich die mapbox-gl-directions.js-Datei durchgelesen und ich denke, ich habe herausgefunden, wie es geht.

In Ihrem Beispiel sollten Sie die Steuerelemente wie diese, um einbetten den Ursprung/Ziel-Feld zu entfernen:

var directions = new mapboxgl.Directions({ 
    unit: 'metric', 
    profile:'driving', 
    container:'directions', // Specify an element thats not the map container. 
    // UI controls 
    controls: { 
    inputs: false, 
    instructions: true 
    } 
}); 

map.addControl(directions);