javascript - Mapbox 方向 : how to extract directions data from result

标签 javascript mapbox directions

我在 JavaScript 应用程序中使用 Mapbox Directions 成功地将几何和路线数据(两个纬度/经度对之间)返回到浏览器。我试图最终在 map 上显示连接它们的路线折线,但即使数据存在,我也无法从结果对象访问方向数据。

这是请求代码:

L.mapbox.accessToken ='pk.eyJ1Ij...9Uk_Z8JqMOQ';
L.mapbox.id = 'tom...ibb';
var startLatLng = L.latLng(38.935899, -77.022353);
var endLatLng = L.latLng(38.90, -77.10);
var directions = L.mapbox.directions();
directions.setOrigin(startLatLng);
directions.setDestination(endLatLng);
var route = directions.query();
console.dir(route);

注意console.dir 行。这是我在控制台中看到的路线:

_initHooksCalled:true
_query:null
_requests:Array[0]
_waypoints:Array[0]
destination:Object
directions:Object
options:Object
origin:Object

这是我在控制台中看到的route.destination、route.options 和route.origin 对象:

    console.log(route.destination);
      => Object {type: "Feature", geometry: Object, properties:...
    console.log(route.origin);
      => Object {type: "Feature", geometry: Object, properties:...
    console.log(route.options);
      => Object {units: "imperial"}

但是当我尝试查看route.directions时,它是未定义的。

    console.log(route.directions);
      => undefined

当在控制台中“打开”整个路线对象时(通过console.dir),我看到了我正在寻找的方向数据:

    directions:Object
        destination:Object
        origin:Object
        routes:Array[2]
            0:Object
                distance:10460
                duration:862
                geometry:Object
                steps:Array[26]
                ...

为什么当使用route.directions访问它时,它会是“未定义”,特别是当我可以使用相同的点语法查看其他“子对象”(例如route.options)的内容时?

最后,当我“字符串化”路由对象时 var routeJson = JSON.stringify(route); 我看到了这个:

    {"options":{
        "units":"imperial"
    },
    "_waypoints":[],
    "_initHooksCalled":true,
    "origin":{
        "type":"Feature",
        "geometry":{
            "type":"Point",
            "coordinates":[-77.022353,38.935899]
        },
        "properties":{"query":[-77.022353,38.935899]}
    },
    "destination":{
        "type":"Feature",
        "geometry":{
            "type":"Point",
            "coordinates":[-77.1,38.9]},
        "properties":{"query":[-77.1,38.9]}
    },
    "_requests":[],
    "_query":{}}

再次强调,没有方向内容!任何想法将不胜感激!

最佳答案

您在哪里可以找到带有查询功能的API?根据Directions API documentation on Github ,你应该这样调用它:

var mapboxClient = new MapboxClient('ACCESSTOKEN');
mapboxClient.getDirections(
  [
    { latitude: 33.6, longitude: -95.4431 },
    { latitude: 33.2, longitude: -95.4431 } ],
  function(err, res) {
  // res is a document with directions
});

// With options
mapboxClient.getDirections([
  { latitude: 33.6875431, longitude: -95.4431142 },
  { latitude: 33.6875431, longitude: -95.4831142 }
], {
  profile: 'mapbox.walking',
  instructions: 'html',
  alternatives: false,
  geometry: 'polyline'
}, function(err, results) {
  console.log(results.origin);
});

我怀疑您需要传递geometry: 'polyline来确保您获得响应中包含的几何信息。

关于javascript - Mapbox 方向 : how to extract directions data from result,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36236016/

相关文章:

reactjs - mapbox 图层的正确类型( typescript )在哪里?

javascript - 路线规划需要双击

javascript - 来自 API 的 Google map 方向摘要

javascript - Javascript for 循环初始化 block 中的词法声明

javascript - 说明 IE 和 FireFox(或 Chrome、Safari 等)之间速度差异的 JavaScript 是什么?

javascript - 允许某些特殊字符,但必须是字母数字

ios - iOS 6 中的应用内 map 方向

javascript - 在 React 中动态添加后 getElementById

leaflet - 在Leaflet中,如何更改 "crs"和其他 "Map options"?

mapbox - 如何使用 pubnub 跟踪多个设备?