如何使用 mapbox-gl-directions 设置起点和终点？

Question

I'm using Mapbox to integrate in a javascript/php project.我正在使用 Mapbox 集成到 javascript/php 项目中。 So far so good.到现在为止还挺好。 Works great.效果很好。 Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and mapbox-directions api .环顾他们的 api，我想知道是否可以在 mapbox-gl-directions 和mapbox-directions api之间进行混合。 They don't seem to be the same thing.I really like the example from mapbox-gl-directions which gives the user options to select between driving, cycling and walking.它们似乎不是一回事。我真的很喜欢mapbox-gl-directions 中的示例，它为用户提供了在驾驶、骑自行车和步行之间进行选择的选项。 But I already have coordinates for the origin point and coordinates for the destination point.但是我已经有了起点的坐标和终点的坐标。 I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to.我不一定需要用户输入这些坐标，但如果用户愿意，我也想让用户选择输入替代坐标。 How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api?如何像 mapbox-directions-api 一样向 mapbox-gl-directions 添加起点和终点？ I've looked everywhere in their docs.我在他们的文档中到处都看过。

mapbox-gl-directions : 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>

Answer 1

Turn转动

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

into进入

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
})

如何使用 mapbox-gl-directions 设置起点和终点？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-01-29 21:48:24

如何使用 mapbox-gl-directions 设置起点和终点？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-01-29 21:48:24

解决方案1
2 已采纳 2020-01-29 21:48:24