uni-app moveToLocation移动中心后折线炸毛

在uni-app中，如果你在使用地图组件时遇到moveToLocation移动中心点后折线（polyline）出现“炸毛”的现象，这通常是由于地图中心点变化导致的重绘问题。为了确保折线在地图移动后仍然平滑，你需要确保在地图中心点变化后重新计算并绘制折线。

以下是一个基本的代码示例，展示了如何在uni-app中使用地图组件，并在移动到当前位置后保持折线的平滑显示。

1. 页面模板 (index.vue):

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      :polylines="polylines"
      @tap="moveToLocation"
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

1. 页面脚本 (index.vue):

<script>
export default {
  data() {
    return {
      longitude: 0, // 初始经度
      latitude: 0,  // 初始纬度
      scale: 15,    // 缩放级别
      markers: [],  // 标记点
      polylines: [
        {
          points: [
            { lng: 116.405285, lat: 39.904989 },
            { lng: 116.403428, lat: 39.915121 },
            // 更多点...
          ],
          color: "#FF0000DD",
          width: 4,
          dottedLine: false
        }
      ]
    };
  },
  methods: {
    moveToLocation() {
      const that = this;
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          that.longitude = res.longitude;
          that.latitude = res.latitude;
          // 重新计算或调整折线点（如果需要）
          // 例如，根据新的中心点调整折线点的相对位置
          // 这里简单示例，不做实际调整
          // 但在实际应用中，你可能需要重新计算或验证折线点
          that.$nextTick(() => {
            // 强制重绘地图和折线
            that.$forceUpdate();
          });
        }
      });
    }
  }
};
</script>

1. 样式 (index.vue):

<style>
/* 样式可根据需要调整 */
</style>

在上述代码中，当用户点击地图时，moveToLocation方法会被触发，获取当前位置并更新地图的中心点。注意，这里并没有实际调整折线点的位置，但在实际应用中，如果折线点需要基于新的中心点进行调整，你需要在获取位置后重新计算这些点。

此外，使用$forceUpdate可以强制Vue重新渲染组件，这有助于解决一些因状态更新不及时导致的渲染问题。然而，频繁使用$forceUpdate可能会影响性能，因此应谨慎使用。

确保在地图中心点变化后，折线点的计算逻辑是正确的，以避免“炸毛”现象。