uni-app nvue页面使用map地图的circles无法重新更新圆的位置信息

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app nvue页面使用map地图的circles无法重新更新圆的位置信息

地图相关配置

HTML部分

<map id="myMap" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" :longitude="longitude"  
latitude="latitude" scale="10" :markers="markers" @markertap="markertap" show-scale :circles="circles"
@regionchange="regionchangetab"></map>

JS部分

circles: [{ 
    latitude: 34.831234072649124,
    longitude: 113.51750879996204,
    fillColor: "#e6060a6A",
    color: "#e6060a6A",
    radius: 25000,
    strokeWidth: 2
}],

修改圆数据方法

regionchangetab(e) {
    console.log("hahaah", e);
    let that = this;
    if (e.type == "end") {
        setTimeout(() => {
            uni.createMapContext("myMap", this).getCenterLocation({
                type: 'gcj02',
                success: (res) => {
                    console.log("当前地图中心的经纬度", res)
                    that.latitude = res.latitude;
                    that.longitude = res.longitude;
                    let circlesinfo = [{ 
                        latitude: that.latitude,
                        longitude: that.longitude,
                        fillColor: "#e6060a6A",
                        color: "#e6060a6A",
                        radius: 50000,
                        strokeWidth: 2
                    }]
                    that.circles = JSON.parse(JSON.stringify(circlesinfo))
                },
                fail: (err) => {}
            })
        }, 400);
    }
}

Harmonyos Next教程
1 回复

在uni-app的nvue页面中，如果你遇到了使用map组件的circles无法重新更新圆的位置信息的问题，这通常是因为circles数组在更新时，Vue的响应式系统没有正确检测到变化。以下是一个可能的解决方案，通过手动操作DOM或使用特定的数据结构来触发更新。

示例代码

首先，确保你的nvue页面中已经包含了map组件，并且你已经定义了初始的circles数据。

<template>
  <div>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="14"
      :circles="circles"
      style="width: 100%; height: 300px;"
    />
    <button @click="updateCircle">Update Circle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823,
      longitude: 116.397470,
      circles: [
        {
          latitude: 39.908823,
          longitude: 116.397470,
          radius: 1000,
          color: '#FF0000DD',
          strokeWidth: 2,
          strokeColor: '#FF0000'
        }
      ]
    };
  },
  methods: {
    updateCircle() {
      // 更新circles数组中的位置信息，但不直接修改原数组引用
      const newCircles = [...this.circles];
      newCircles[0].latitude += 0.001; // 例如，将纬度增加一个小值
      newCircles[0].longitude += 0.001; // 例如，将经度增加一个小值

      // 使用setTimeout模拟异步更新，确保Vue的响应式系统能够捕获到变化
      setTimeout(() => {
        this.$set(this, 'circles', newCircles);
      }, 0);
    }
  }
};
</script>

解释

  1. 数据定义：在data中定义了latitude、longitude和circles，其中circles是一个包含圆信息的数组。

  2. 按钮点击事件：定义了一个按钮，当点击时调用updateCircle方法。

  3. 更新circles：在updateCircle方法中，通过创建一个新数组newCircles来复制原始的circles数组，并修改新数组中的圆的位置信息。

  4. 异步更新：使用setTimeout来模拟异步更新，确保Vue的响应式系统能够捕获到数组的变化。直接修改数组的元素并不会触发Vue的响应式更新，因此需要创建一个新数组并重新赋值给circles。

通过这种方式，你可以确保在nvue页面的map组件中，circles的位置信息能够被正确地更新。

回到顶部