Mapbox-gl-directions 이벤트가 실행되지 않습니다

Question

mapbox-gl-directions에 두 마커 사이의 간단한 경로를 계산하려고합니다. .on('route') 이벤트를 사용하려고하지만 결코 실행되지 않습니다. docs에 표시된 예제를 다시 작성하려고 시도했지만 성공하지는 못했습니다. 다음을 수행했습니다.

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도 있습니다.

Answer 1

Mapbox GL 및 Mapbox GL Directions 라이브러리의 최신 버전을 사용하도록 외부 리소스 링크를 업데이트하여 제공 한 JS Fiddle에서 코드를 실행할 수있었습니다. 즉,지도 상자 GL JS의 v0.12.0이 v0.26.0으로 변경되었으며 길 찾기 플러그인의 v1.0.0이 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' /> 

그것은 당신이 그것을 12 월 2015 년 출판 된 이후 업데이트되지 않은 docs에서 발견 된 예처럼 보이는; 더 최근의 지침 예에 here's a link을 입력하고 두 라이브러리의 올바른 버전을 사용합니다. 마지막으로 Mapbox.js에 대한 외부 링크는 Mapbox GL JS를 사용할 때 필요하지 않으므로 제거 할 수 있습니다. 행운을 빕니다!