文章/答案/技术大牛

发布

社区首页 >问答首页 >Mapbox:如何从http请求链接获取点之间旅行的持续时间值？

问Mapbox:如何从http请求链接获取点之间旅行的持续时间值？
EN

Stack Overflow用户

提问于 2021-06-16 20:32:41

回答 1查看 40关注 0票数 0

我在使用Mapbox和javascript将两点之间的旅行持续时间值从http请求链接到变量时遇到了麻烦。Mapbox Matrix API链接的http请求运行良好，可以在inspect元素中找到，并在打开时正确显示持续时间和距离矩阵，但我无法让javascript将其放入变量中。

注意:打开HTML文件时，会在当前位置设置一个初始标记。单击地图的任何部分以放置另一个标记，然后单击初始标记以完成绘图。您应该在地图上有图，包括初始标记和inspect element控制台上的http请求链接。我几天前才开始做javascript，我对javascript和Mapbox APIs几乎一无所知，所以如果有人能找到一种方法将持续时间存储在变量中，那将是非常有帮助的。

我的html和javascript如下：

HTML文件

<!DOCTYPE html>
<html lang='en' dir="ltr">
    <head>
    <meta charset='utf-8'>
    

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css' rel='stylesheet' />
    
    
    
    <script src="script.js" defer></script>
    <style>
    #map {
        height: 100vh;
        width: 100vw;
    }
    body{
        margin: 0;
    }
    .mapboxgl-marker {
        height: 20px;
        width: 20px;
        z-index: 5;
        border: 1px solid black;
        border-radius: 50%;
        background-color: #305bad;
    }
    .mapbox-marker:hover {
        cursor: pointer;
    }
    </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

JAVASCRIPT文件

mapboxgl.accessToken = 'pk.eyJ1IjoiYXJjZWxkaXpvbiIsImEiOiJja3BvemlnajIwbGMzMm9wYXdsZWtlYzhxIn0.B1rc7bpub0gGq6q3xpIhvw';


navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {enableHighAccuracy: true})

let coordinates = 0;
function successLocation(position){
    setupMap([position.coords.longitude, position.coords.latitude])
}

function errorLocation(){
    setupMap([120.9816438, 14.58925259])
}


//creation of map
function setupMap(center){
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: center,
        zoom: 16
    });
    

    //creation of navigation object
    const nav = new mapboxgl.NavigationControl();
    map.addControl(nav);
    
    var start = center;
    console.log(start);

    //initialization of the url
    var url = "https://api.mapbox.com/directions-matrix/v1/mapbox/driving/" + center;
    
    var coords = center;
    
    //creation of initial marker
    var el = document.createElement('div');
    el.id = 'startMarker';
    
    var startMarker = new mapboxgl.Marker(el)
    .setLngLat(center)
    .addTo(map);
    
    //creation of marker on click event
    var markerCount = 1;
    map.on('click', function(e){
        url = getLocations(url, map, e);
        
        var coords = center;
        var el = document.createElement('div');
        el.id = 'marker' + markerCount;
        markerCount++;
        
        new mapboxgl.Marker(el)
        .setLngLat(e.lngLat)
        .addTo(map);
    });
    
    
    //when initial marker is clicked, url string is concatenated with my mapbox key in finishURL
    //the URL is then passed to requestMatrix, where the http request is made
    startMarker.getElement().addEventListener('click', () => {
        url = finishURL(url, map);
        requestMatrix(url);
    });
    
}

//list the coordinates of the recently placed marker on the url string
function getLocations(link, map, e){
    var url = link + ";" + e.lngLat.lng + "," + e.lngLat.lat;
    return url;
}

//where the url is concatenated with my mapbox key
function finishURL(link, map){
    var url = link +  "?access_token=pk.eyJ1IjoiYXJjZWxkaXpvbiIsImEiOiJja3BvemlnajIwbGMzMm9wYXdsZWtlYzhxIn0.B1rc7bpub0gGq6q3xpIhvw";
    return url;
}

//where the url is passed onto to be requested 
function requestMatrix(link){
    var url = link;
    console.log("passed: " + url);
    //the URL works fine, and can be opened to view the distance and duration values
    


    //starting from this part, I have just copied it from a youtube video, it seemed like it would work but it won't
    //https://youtu.be/7vnVpw1o0zY?t=559
    var req = new XMLHttpRequest();
    req.responseType = 'json';
    req.open('GET', url, true);
    req.onload = function(){
        var jsonResponse = req.response;
        var duration = jsonResponse.durations[0][1]/60;
        console.log("durations: " + duration); //at this point, durations should be
        //displayed in the console, but it doesn't
        }
    }

    ```

mapbox-gl

javascript

html

mapbox

回答 1

Stack Overflow用户

发布于 2021-06-16 20:47:30

发了几分钟后终于明白了，对不起！哈哈，我放了一个

req.send(null);

紧跟在

req.open('GET', url, true);

不过，有人愿意解释一下为什么没有它就不能工作吗？:)谢谢

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68002741

复制

相似问题

问Mapbox:如何从http请求链接获取点之间旅行的持续时间值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mapbox:如何从http请求链接获取点之间旅行的持续时间值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mapbox:如何从http请求链接获取点之间旅行的持续时间值？
EN