Mapbox Driving Direction with Custom Marker

Question

У меня есть следующий код для использования mapbox в качестве моего направления движения, но, к сожалению, он не позволяет мне менять маркеры, и он продолжает использовать маркер по умолчанию, хотя я пытаюсь изменить его с помощью GeoJSON

<script> 

L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyc2hpZGFsYXZpIiwiYSI6ImNpZjNmNTRrYzQ0b2xzNWx1bXN5MnlmdjUifQ.IvZZfdiPe4rxQNolE88fhg'; 

var __journey = {"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21","detail":{"logbook":"29","consumer":"732","account":"1","category":"13","source":"2","platform":"4","vehicle":"25","label":"Farshid","startingodometer":"20000","endingodometer":"22721","note":"","status":"unverified","isreimbursable":"no","isdeductible":"yes","type":"deductible","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21","dbupdate":"2015-11-25 14:42:21"},"__consumer":{"customer":null,"customerkey":"ed64e42a-e7c1-49b9-9fef-f5dd96bcd783","firstname":null,"lastname":null,"apikey":null,"email":"farshid@ichit.com","birth":null,"pincode":null,"pinlastupdate":null,"password":null,"gender":null,"emailverify":"1","postcode":null,"reference":null,"country":null,"forgetpasswordtoken":null,"forgetpasswordexpiry":null,"ipaddress":null,"company":"3","created":null,"updated":null,"active":"1","active !=":null,"archive":"0","archive !=":null,"mobile":null},"__account":{"id":"29","account":"Business","sequence":null,"icon":null,"parent":null,"customer":null,"admin":null,"created":"2015-11-23 03:10:21","updated":"2015-11-23 03:10:21","active":null},"__category":{"id":"29","category":"Home","brands":null,"keywords":null,"icon":null,"parent":null,"customer":null,"admin":null,"active":null,"customisable":null,"created":"2015-11-23 03:10:21","updated":"2015-11-25 03:42:21"},"__source":{"source":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__platform":{"platform":"29","creator":null,"name":"My Car","updated":"2015-11-25 03:42:21","created":"2015-11-23 03:10:21"},"__route":[{"logbookroute":"1448421928.896","logbook":"29","latitude":"-37.8437403","longitude":"144.9758769","pindate":"2015-11-05","pintime":"02:09 AM","journey":"29","pinned":"2015-11-05 02:09:00"},{"logbookroute":"1448421928.901","logbook":"29","latitude":"-31.980216","longitude":"115.869578","pindate":"2015-11-22","pintime":"12:10 PM","journey":"29","pinned":"2015-11-22 12:10:00"}],"__vehicle":{"vehicle":"25","consumer":"732","name":"My Car","make":"Toyota","family":"Yaris","description":"1.4 Manual","year":"2015","odometer":"20725","registrationnumber":"123ABC","isactive":"yes","isdefualt":"no","isdeleted":"no","updated":"2015-10-10 10:10:10","created":"2015-10-10 10:10:10","dbupdate":"2015-11-23 03:10:21","log":"2","__make":false,"__family":false,"__description":false},"__reimbursement":false,"taxdeduction_code":"D5","mileage":"2721","name":"My Car","accountname":"Business","categoryname":"Home","reimbursement_status":null}; 
var start = {lat: '-37.8437403', lng: '144.9758769'}; 
var finish = {lat: '-31.980216', lng: '115.869578'}; 
var zoom = 9; 

if(Number(__journey.mileage) >= 10000) zoom = 1; 
else if(Number(__journey.mileage) >= 4000) zoom = 2; 
else if(Number(__journey.mileage) >= 700) zoom = 3; 
else if(Number(__journey.mileage) >= 500) zoom = 5; 
else if(Number(__journey.mileage) >= 400) zoom = 6; 
else if(Number(__journey.mileage) >= 300) zoom = 7; 
else if(Number(__journey.mileage) >= 200) zoom = 8; 
else zoom = 9; 

console.log(zoom); 

var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true}).setView([-35.792529592717, 129.89108613555], zoom); 

var geoJson = { 
    type: "FeatureCollection", 
    features: [ 
     { 
      type: "Feature", 
      properties: { 
       "marker-color": "#f76565", 
       route: {id: 1, type: "origin", points: 2} 
      }, 
      geometry: { 
       type: "Point", 
       coordinates: ['144.9758769', '-37.8437403']} 
     },{ 
      type: "Feature", 
      properties: { 
       "marker-color": "#f76565", 
       route: {id: 2, type: "destination", points: 3} 
      }, 
      geometry: { 
       type: "Point", 
       coordinates: ['115.869578', '-31.980216'] 
      } 
     } 
    ] 
}; 

var origin = {"type":"Feature","geometry":{"type":"Point","coordinates":[144.9758769,-37.8437403]},"properties":{"marker-symbol":"circle-stroked","marker-color":"ff1f20","marker-size":"medium"}}; 
var destination = {"type":"Feature","geometry":{"type":"Point","coordinates":[115.869578,-31.980216]},"properties":{"marker-symbol":"circle-stroked","marker-color":"23be20","marker-size":"medium"}}; 

// = L.mapbox.directions({profile: 'mapbox.driving'}) 
var directions = L.mapbox.directions(); 
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map); 
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map); 
directions.setOrigin(origin).setDestination(destination).query(); 

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map); 
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map); 

var myLayer = L.mapbox.featureLayer().addTo(map); 
myLayer.setGeoJSON(geoJson); 

Answer 1

Все, что мне нужно было сделать, это настроить файл direction.js, к сожалению, даже если вы разместите свой маркер настройки как часть вашего geoJson, потому что он жестко запрограммирован с указанием direction.js, он не изменит его, если вы не загрузите библиотеку и настроить его самостоятельно (вы можете сделать его динамичным, как вы загрузите объект GeoJSON или изменить его как жёстко, как вы хотите) в то directions.js искать следующий код

   L.setOptions(this, options); 
      this._directions = directions || new L.Directions(); 
      L.LayerGroup.prototype.initialize.apply(this); 

      this._drag = debounce(L.bind(this._drag, this), 100); 

      this.originMarker = L.marker([0, 0], { 
       draggable: !this.options.readonly, 
       icon: L.mapbox.marker.icon({ 
        "marker-symbol": "circle-stroked", 
        "marker-color": "23be20", 
        "marker-size": "medium", 
        "stroke": "#e8b920", 
        "stroke-opacity": "1.0", 
        "stroke-width": 5, 
        "fill":"#e8b920", 
       }) 
      }).on('drag', this._drag, this); 

      this.destinationMarker = L.marker([0, 0], { 
       draggable: !this.options.readonly, 
       icon: L.mapbox.marker.icon({ 
        "marker-symbol": "circle-stroked", 
        "marker-color": "ff1f20", 
        "marker-size": "medium", 
        "stroke": "#e8b920", 
        "stroke-opacity": "1.0", 
        "stroke-width": 5, 
        "fill":"#e8b920", 
       }) 
      }).on('drag', this._drag, this); 

      this.stepMarker = L.marker([0, 0], { 
       icon: L.divIcon({ 
        className: 'mapbox-marker-drag-icon mapbox-marker-drag-icon-step', 
        iconSize: new L.Point(12, 12) 
       }) 
      }); 

      this.dragMarker = L.marker([0, 0], { 
       draggable: !this.options.readonly, 
       icon: this._waypointIcon() 
      }); 

      this.dragMarker 
       .on('dragstart', this._dragStart, this) 
       .on('drag', this._drag, this) 
       .on('dragend', this._dragEnd, this); 

      this.routeLayer = L.geoJson(null, { 
       style: this.options.routeStyle 
      }); 
      this.routeHighlightLayer = L.geoJson(null, { 
       style: this.options.routeStyle 
      }); 

      this.waypointMarkers = []; 
     }, 

Answer 2

MapBox Directions API вставляет стандартные маркеры в верхней части пользовательских единиц. Вы также можете добавить directionsLayer и directionsRoutesControl несколько раз.

Это должно работать:

var geoJson = { 
    type: "FeatureCollection", 
    features: [ 
     { 
      type: "Feature", 
      properties: { 
       "marker-color": "#f76565", 
       "marker-symbol":"circle-stroked", 
       "marker-color":"ff1f20", 
       "marker-size": "medium",     
       route: {id: 1, type: "origin", points: 2} 
      }, 
      geometry: { 
       type: "Point", 
       coordinates: ['144.9758769', '-37.8437403']} 
     },{ 
      type: "Feature", 
      properties: { 
       "marker-color": "#f76565", 
       "marker-symbol":"circle-stroked", 
       "marker-color":"23be20", 
       "marker-size":"medium",     
       route: {id: 2, type: "destination", points: 3} 
      }, 
      geometry: { 
       type: "Point", 
       coordinates: ['115.869578', '-31.980216'] 
      } 
     } 
    ] 
}; 

var origin = geoJson.features[0]; 
var destination = geoJson.features[1]; 

var directions = L.mapbox.directions(); 
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map); 
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map); 
directions.setOrigin(origin).setDestination(destination).query(); 

var myLayer = L.mapbox.featureLayer().addTo(map); 
myLayer.setGeoJSON(geoJson); 

Вот a working example.