Mapbox Polyline 太复杂了，也许吧？

Question

我正在使用 Mapbox API 定位两个 gps 位置并在它们之间绘制折线。我编写的代码...有时有效。

似乎如果两个位置在物理上彼此靠近，则它通常会起作用，但如果两个点相距较远，则它通常不会起作用，但我无法复制结果始终如一。我现在的工作理论是折线变得太复杂以至于 API 无法解码。有没有办法简化折线或首先请求更简单的折线？

我已经在下面的代码中标记了有问题的行。有谁知道为什么有时有效有时无效？？？

如果重要的话，我的最终目标是生成将在报告中使用的静态地图图像，所以我并不真正担心带宽或效率，我只需要图像即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
     <script src="js/jquery.fileDownload.js"></script>

    <script>
    
        //Declare Variables
        var token = "myuniquetoken"; 
        var longitude;
        var latitude;
        var longitude2;
        var latitude2;
        var polyline;
        
        //When first Get GPS Button is Pressed
        $(document).ready(function() {
            $("#btnGetGPS").click(function(){
                var address = $("#address").val();
                var addressstring = address.replace(" ", "%20");
                var url = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + addressstring + ".json?access_token=" + token;
                
                var jqxhr = $.getJSON( url, function(data) {
                    
                    longitude = data["features"][0]["center"][0];
                    latitude = data["features"][0]["center"][1];
                    
                    $("#gpslong").text(longitude);
                    $("#gpslat").text(latitude);
                                    
                    var mapPinUrl = "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-l+000(" + longitude + "," + latitude + ")/" + longitude + "," + latitude + ",14/500x300?access_token=" + token;
                    
                    $('#mapDiv').html('<img id="mapImg" src=' + mapPinUrl +' />');
                    $('#secondlocation').show();
                                    
                                    
                  });
            }); 
        });

        //When second Get GPS Button is Pressed
        $(document).ready(function() {
            $("#btnGetGPS2").click(function(){
                var address2 = $("#address2").val();
                var addressstring2 = address2.replace(" ", "%20");
                var url2 = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + addressstring2 + ".json?access_token=" + token;
                var jqxhr2 = $.getJSON( url2, function(data) {
                    
                    longitude2 = data["features"][0]["center"][0];
                    latitude2 = data["features"][0]["center"][1];
                    
                    $("#gpslong2").text(longitude2);
                    $("#gpslat2").text(latitude2);
                
                
                //Get a polyline
                                
                var polyURL = "https://api.mapbox.com/directions/v5/mapbox/driving/" + longitude + "," + latitude + ";" + longitude2 + "," + latitude2 + "?access_token=" + token;
                console.log(polyURL);
                
                var polyJSON = $.getJSON( polyURL, function(data2) {
                    
                    polyline = data2["routes"][0]["geometry"];
                    console.log(polyline);
                    
                    //////////////////The next line is the problematic one.//////////////////
                    
                    var mapRoute = "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(" + longitude + "," + latitude + "),pin-s-b+000(" + longitude2 + "," + latitude2 + "),path-5+f44-0.5(" + polyline + ")/auto/500x300?access_token=" + token;
                    console.log(mapRoute);
                    
                    $('#mapDiv2').html('<img id="mapImg" src=' + mapRoute +' />');
                    
                  });
                
                  });
            }); 
        });
        
    </script>
</head>

<body>
   Enter an address (i.e. 1600 Pennsylvania Avenue NW, Washington, DC 20500):</br>
    <input id="address"/></br>
    <button id="btnGetGPS" type="button">Get GPS</button>
    <div id = "gpslong"></div>
    <div id = "gpslat"></div>
    <div id="mapDiv"></div>
    <div id="secondlocation" style="display:none">
        Enter a second location:
        <input id="address2"/></br>
        <button id="btnGetGPS2" type="button">Get GPS</button>
        <div id = "gpslong2"></div>
        <div id = "gpslat2"></div>
        <div id="mapDiv2"></div>
    </div>
</body>
</html>

Answer 1

我将留下这个问题并证明某人帮助我发现的答案，希望将来能帮助其他人。 . 问题是我在第一个 API 请求中得到的折线包含特殊字符，如 `、~、| 等。当我尝试在第二个 API 请求中使用相同的字符串时，那些特殊字符角色有时会引起问题。我在下面添加了一行代码来清除那些特殊字符并用安全的 ASCII 替换它们。 . 折线 = encodeURIComponent(折线);

Mapbox Polyline 太复杂了，也许吧？

Mapbox Polyline too complex, maybe?

mapbox

polyline