Mapbox 折线太复杂了，也许吧？答案

【问题标题】：Mapbox Polyline too complex, maybe?Mapbox 折线太复杂了，也许吧？
【发布时间】：2021-04-02 12:56:39
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： mapbox polyline

【解决方案1】：

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

【讨论】：