Mapbox行车方向与自定义标记 [英] Mapbox Driving Direction with Custom Marker
本文介绍了Mapbox行车方向与自定义标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码使用mapbox作为我的行车方向，但不幸的是它不允许我更改标记，并且它继续使用其默认标记，即使我尝试使用geoJson更改它
I have the following code to use mapbox as my driving direction, but unfortunately it doesn't allow me to change the markers, and it keeps using its default marker even though I try to change it with 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);
推荐答案
我需要做的就是自定义directions.js文件，不幸的是，即使您将自定义标记作为geoJson的一部分发布，因为它是硬编码的direction.js除非您下载库，否则它不会更改它并自行定制（您可以在加载geoJson对象时将其设置为动态，或者根据需要将其更改为硬编码）在directions.js中查找以下代码
All I needed to do was to customise the directions.js file, unfortunately even if you post your customise marker as part of your geoJson because it is hardcoded withing directions.js it won't change it unless you download the library and customise it yourself (you can make it dynamic as you load the geoJson object or change it as hardcode as you want) in the directions.js look for the following code
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 = [];
},
这篇关于Mapbox行车方向与自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
