我有以下代码使用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);
答案 0 :(得分：1)
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);
答案 1 :(得分：1)
所有我需要做的就是自定义directions.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 = [];
},