2016-10-22 22 views
0

我正試圖計算mapbox-gl-directions中兩個標記之間的簡單路線。我想使用.on('route')事件,但它永遠不會觸發。我嘗試重建docs中顯示的示例,但沒有成功。我做了以下事情:Mapbox-gl-directions事件不會觸發

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8' 
}); 


var directions = new mapboxgl.Directions({ 
    unit: 'metric', // Use the metric system to display distances. 
    profile: 'driving', // Set the initial profile to walking. 
    container: 'directions' // Specify an element thats not the map container. 
}); 


map.on('load', function() { 
    directions.setOrigin([77.5045504332, 13.0386169339]); // On load, set the origin to "Toronto, Ontario". 
    directions.setDestination([77.5075504332, 13.0386169339]); // On load, set the destination to "Montreal, Quebec". 
}); 


directions.on('route', function(e) { 
    alert("FIRE!") 
}); 

爲什麼不激發這個事件? 這裏也是JS FIDDLE

回答

1

我能夠讓您的代碼在您通過更新外部資源鏈接提供的JS Fiddle中運行,以使用最新版本的Mapbox GL和Mapbox GL Directions庫。這意味着Mapbox GL JS的v0.12.0更改爲v0.26.0v1.0.0的Directions插件更改爲v2.2.0

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' /> 

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.2.0/mapbox-gl-directions.js'></script> 
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.2.0/mapbox-gl-directions.css' type='text/css' /> 

看起來你在docs發現,因爲它出版於2015年12月一直沒有更新的例子; here's a link到一個更新的方向示例,並使用這兩個庫的正確版本。最後,我可能會刪除外部鏈接到Mapbox.js,因爲它們在使用Mapbox GL JS時不是必需的。祝你好運!