Question

我正在使用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());
    }

  })

})

但是，当我复制并粘贴完全相同的值时，会显示方向。手动向表单输入添加空格也有助于插件检索方向。

我认为有一些按键事件我可以触发来模仿这种行为并让值正确地通过，但是我很难在代码中看到它。我主要是在这里看，但是很简短：https://github.com/mapbox/mapbox-directions.js/blob/121427f30e096e6e839652b8baa2d7ac6660fad3/src/input_control.js

有没有人有这方面的经验？

Answer 1

感谢您提供帮助@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行车路线和jQuery

1 个答案: