Uniapp编写小程序画折线画不出来

Question

小程序获取到了路径的各个点，都输出成功。但是到最后一步画折线地图上不显示这是为什么？
下面是代码

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试使用 UniApp 编写的小程序中绘制折线图，但遇到了问题。根据你提供的代码，我发现了几个可能的问题。让我帮你修复这些问题，并提供一个完整的示例代码。

首先，纠正代码中的变量引用错误（start_address、end_address 和 keyCode），确保它们是正确的变量名。此外，j++ 应该写为 j += 2，因为每次循环我们需要处理两个坐标值。接下来，我会修改并优化代码，使其正确工作。

这里是修改后的代码：

methods: {
    getRouteDriving() {
        this.point = [];
        uni.request({
            url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.startAddress.latitude + ',' + this.startAddress.longitude + '&to=' + this.endAddress.latitude + ',' + this.endAddress.longitude + '&accuracy=30&output=json&callback=cb' + '&key=' + this.keyCode,
            success: (res) => {
                if (res.data.status == 0) {
                    let coors = res.data.result.routes[0].polyline;
                    for (let i = 2; i < coors.length; i += 2) {
                        let lat = parseFloat(coors[i]) / 1000000;
                        let lng = parseFloat(coors[i + 1]) / 1000000;
                        this.point.push({ latitude: lat, longitude: lng });
                    }

                    this.polyline = [{
                        points: this.point,
                        color: "#3FB837",
                        width: 3,
                        dottedLine: false
                    }];
                }
            },
            fail: function(err) {
                console.error('请求失败', err);
            }
        });
    }
}

这段代码修复了变量引用错误和数组索引问题。同时，为了更好的调试，我添加了一个 fail 回调函数，这样在请求失败时可以在控制台看到错误信息。

要确保你的地图组件已经正确设置并且数据已加载到页面上，你需要在你的 WXML 文件中包含地图组件（例如：<map location="true" />)，然后在适当的地方调用 getRouteDriving() 函数，比如在生命周期方法 onLoad 中：

<view>
  <map location="true">
    <map-polyline path="{{polyline}}" />
  </map>
</view>

<script>
export default {
  onLoad() {
    this.getRouteDriving();
  },
  // ...其他代码
};
</script>

在这个例子中，我们使用 <map-polyline> 组件来渲染折线。注意，你需要确保你的项目中已经引入了地图组件，并且有相应的权限配置。如果没有，请参考官方文档进行设置：https://uniapp.dcloud.io/collocation/map/

按照以上步骤操作后，你应该能看到地图上的折线。如果仍然有问题，请检查网络请求是否成功，以及是否有任何其他错误信息。