Mapbox 行车路线和 jQuery
Mapbox Driving Directions and jQuery
我正在使用 Mapbox 行车路线插件,在 rails 应用程序中进行我自己的地理编码,并使用 jQuery 设置 #mapbox-directions-origin-input 的值和#mapbox-directions-destination-input 表单输入地址或坐标。当我设置值时,没有任何反应。
$(document).ready(function(){
$('#mapbox-directions-origin-input').val($('#current_coordinates').text());
$('.leaflet-marker-icon').click(function(){
if($('.leaflet-popup').length > 0){
$('#mapbox-directions-destination-input').val($('.marker-description').text());
}
})
})
但是,当我复制并粘贴完全相同的值时,会出现说明。手动向表单输入添加 space 也有助于插件检索方向。
我假设我可以触发某种按键事件来模仿这种行为并让值正确传递,但我很难在代码中看到它。我主要是看这里,但很快就没了:https://github.com/mapbox/mapbox-directions.js/blob/121427f30e096e6e839652b8baa2d7ac6660fad3/src/input_control.js
有人有这方面的经验吗?
感谢您提供帮助@kmandov!
我可以通过围绕 jQuery 片段做一个结束 运行 来完成这项工作。
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map);
var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);
var destination = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [<%= @direction.business.longitude %>, <%= @direction.business.latitude %>]
},
"properties": {
"title": '<%= link_to @direction.business.name, business_url(@direction.business) %>',
"description": '<%= @direction.business.full_street_address %>',
"marker-color": "#3ca0d3",
"marker-size": "large",
"marker-symbol": "star"
}
};
var origin = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [<%= @current_location.longitude %>, <%= @current_location.latitude %>]
},
"properties": {
"title": 'You',
"description": '',
"marker-color": "#ff0000",
"marker-size": "large",
"marker-symbol": "heart"
}
};
directions.setOrigin(origin).setDestination(destination).query();
也感谢 Mapbox 团队回复我的邮件!
我正在使用 Mapbox 行车路线插件,在 rails 应用程序中进行我自己的地理编码,并使用 jQuery 设置 #mapbox-directions-origin-input 的值和#mapbox-directions-destination-input 表单输入地址或坐标。当我设置值时,没有任何反应。
$(document).ready(function(){
$('#mapbox-directions-origin-input').val($('#current_coordinates').text());
$('.leaflet-marker-icon').click(function(){
if($('.leaflet-popup').length > 0){
$('#mapbox-directions-destination-input').val($('.marker-description').text());
}
})
})
但是,当我复制并粘贴完全相同的值时,会出现说明。手动向表单输入添加 space 也有助于插件检索方向。
我假设我可以触发某种按键事件来模仿这种行为并让值正确传递,但我很难在代码中看到它。我主要是看这里,但很快就没了:https://github.com/mapbox/mapbox-directions.js/blob/121427f30e096e6e839652b8baa2d7ac6660fad3/src/input_control.js
有人有这方面的经验吗?
感谢您提供帮助@kmandov!
我可以通过围绕 jQuery 片段做一个结束 运行 来完成这项工作。
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map);
var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);
var destination = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [<%= @direction.business.longitude %>, <%= @direction.business.latitude %>]
},
"properties": {
"title": '<%= link_to @direction.business.name, business_url(@direction.business) %>',
"description": '<%= @direction.business.full_street_address %>',
"marker-color": "#3ca0d3",
"marker-size": "large",
"marker-symbol": "star"
}
};
var origin = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [<%= @current_location.longitude %>, <%= @current_location.latitude %>]
},
"properties": {
"title": 'You',
"description": '',
"marker-color": "#ff0000",
"marker-size": "large",
"marker-symbol": "heart"
}
};
directions.setOrigin(origin).setDestination(destination).query();
也感谢 Mapbox 团队回复我的邮件!