Как установить источник и пункт назначения с mapbox-gl-directions? - PullRequest
Новая
       7

Как установить источник и пункт назначения с mapbox-gl-directions?

1 голос
/ 20 января 2020

Я использую Mapbox для интеграции в проект javascript / php. Все идет нормально. Работает отлично. Оглядываясь вокруг их API, я задавался вопросом, можно ли смешивать mapbox-gl-directions и mapbox-directions api . Кажется, они не одно и то же. Мне очень нравится пример из mapbox-gl-directions , который дает пользователю возможность выбирать между вождением, ездой на велосипеде и ходьбой. Но у меня уже есть координаты для исходной точки и координаты для пункта назначения. Мне не обязательно, чтобы пользователь вводил эти координаты, но я также хотел бы оставить пользователю возможность вводить альтернативные координаты, если он этого хочет. Как я могу добавить начальную и конечную точки к mapbox-gl-directions так же, как mapbox-directions-api? Я смотрел везде в их документах.

mapbox-gl-directions : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
    type="text/css"
/>
<div id="map"></div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-79.4512, 43.6568],
        zoom: 13
    });

    map.addControl(
        new MapboxDirections({
            accessToken: mapboxgl.accessToken
        }),
        'top-left'
    );
</script>

</body>
</html>

1 Ответ

1 голос
/ 30 января 2020

Преврати 

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);

в 

var directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken
    });

map.addControl(directions,'top-left');

map.on('load',  function() {
    directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
    directions.setDestinaion([11, 22]); // can be address
})
...