引用腾讯地图赋值polyline后地图未显示

Question

point数组经检验可以打印出来，赋值polyline后，地图仍然是不显示，请问哪里出错了

Answer 1

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

根据您提供的代码，看起来您正在尝试从腾讯地图API获取驾车路线，并将其显示在地图上。在分析您的代码之后，我发现了一个可能导致地图不显示路线的问题：在设置polyline时，您没有正确地将数据格式化为腾讯地图组件期望的形式。

这里是修复后的getRouteDriving()方法：

methods: {
  async getRouteDriving() {
    this.point = [];
    
    try {
      const response = await uni.request({
        url: `https://apis.map.qq.com/ws/direction/v1/driving/?from=${this.start_address.latitude},${this.start_address.longitude}&to=${this.end_address.latitude},${this.end_address.longitude}&accuracy=30&output=json&callback=cb&key=${this.keycode}`,
      });

      if (response.data.status === 0) {
        const coors = response.data.result.routes[0].polyline;
        
        // 这里不需要进行坐标调整，因为腾讯地图API返回的polyline已经是正确的格式
        const points = coors.split(';').map(coord => coord.split(',').map(parseFloat));

        this.point = points.flatMap(point => [{ latitude: point[0], longitude: point[1] }]);
        console.log(this.point);

        this.polyline = [
          {
            points: this.point,
            color: "#3FB837",
            width: 3,
            dottedLine: false, // 如果不是点线，这里设为false
          },
        ];
      }
    } catch (error) {
      console.error("Error fetching route:", error);
    }
  },
}

然后，在您的模板文件中，确保已经正确引入了腾讯地图组件库，并且添加了相应的权限配置（如GPS、网络等）。确保<map>标签中的属性与上面的方法中使用的变量匹配。

<template>
  <view>
    <map class="map"
         :longitude.sync="longitude"
         :latitude.sync="latitude"
         :markers="markers"
         :polyline="polyline">
    </map>
    <button @tap="getRouteDriving()">规划路径</button>
  </view>
</template>

<script>
// ...其他导入语句
import Map from '@vant/components/map/index.vue';
export default {
  components: {
    Map,
  },
  // ...其他代码
}
</script>

检查一下是否已正确设置了地图的经纬度（longitude和latitude）以及markers。同时，确保在项目的manifest.json或app.json中启用了相应的地图和位置权限。

如果以上步骤都无法解决您的问题，请提供更详细的错误信息或日志，以便进一步排查。