uni-app nvue页面map组件动态绑定longitude和latitude导致地图无法初始化

开发环境	版本号	项目创建方式
Windows	Windows 10 专业版21H2	HBuilderX
	3.3.12

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 10 专业版21H2

HBuilderX类型：Alpha

HBuilderX版本号：3.3.12

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：小米10s

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

操作步骤：
如图代码

预期结果：
刚进入页面即可看见地图

实际结果：
实际地图无法显示，一片空白

bug描述：
地图无法进行初始化，但是在代码中通过method修改经纬度的值，可以移动到对应的经纬度，地图显示正常

更多关于uni-app nvue页面map组件动态绑定longitude和latitude导致地图无法初始化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 1楼

经纬度设置的值无效，你这个需求也无需手动计算宽高，直接 css 填充就可以了 <template>
<view class="content">
<map style="flex: 1;" :longitude="longitude" :latitude="latitude"></map>
</view>
</template>

更多关于uni-app nvue页面map组件动态绑定longitude和latitude导致地图无法初始化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

好的，谢谢了，我真是迷了，纬度最大值90度

htzhanglong 3楼

在 uni-app 中使用 nvue 页面的 map 组件时，如果动态绑定 longitude 和 latitude 导致地图无法初始化，可能是因为 map 组件在初始渲染时，longitude 和 latitude 的值为 null 或 undefined，导致地图无法正确加载。

解决方法

确保初始值不为空：在 data 中给 longitude 和 latitude 设置一个合理的初始值，确保地图在初始化时能够正确加载。
```
export default {
  data() {
    return {
      longitude: 116.397428,
      latitude: 39.90923
    };
  }
};
```

使用 v-if 控制地图渲染：在 longitude 和 latitude 没有有效值之前，先不渲染 map 组件，等到有有效值之后再渲染。

<template>
  <view>
    <map
      v-if="longitude && latitude"
      :longitude="longitude"
      :latitude="latitude"
      :markers="markers"
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: null,
      latitude: null,
      markers: []
    };
  },
  mounted() {
    // 模拟异步获取经纬度
    setTimeout(() => {
      this.longitude = 116.397428;
      this.latitude = 39.90923;
    }, 1000);
  }
};
</script>

使用 watch 监听变化：如果 longitude 和 latitude 是动态变化的，可以使用 watch 来监听它们的变化，并在变化时重新初始化地图。

export default {
  data() {
    return {
      longitude: null,
      latitude: null,
      markers: []
    };
  },
  watch: {
    longitude(newVal) {
      if (newVal && this.latitude) {
        this.initMap();
      }
    },
    latitude(newVal) {
      if (newVal && this.longitude) {
        this.initMap();
      }
    }
  },
  methods: {
    initMap() {
      // 初始化地图的逻辑
    }
  },
  mounted() {
    // 模拟异步获取经纬度
    setTimeout(() => {
      this.longitude = 116.397428;
      this.latitude = 39.90923;
    }, 1000);
  }
};

使用 ref 手动控制地图：如果以上方法仍然无法解决问题，可以尝试使用 ref 获取 map 组件的实例，并在 longitude 和 latitude 变化时手动调用地图的初始化方法。

<template>
  <view>
    <map
      ref="map"
      :longitude="longitude"
      :latitude="latitude"
      :markers="markers"
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: null,
      latitude: null,
      markers: []
    };
  },
  watch: {
    longitude(newVal) {
      if (newVal && this.latitude) {
        this.initMap();
      }
    },
    latitude(newVal) {
      if (newVal && this.longitude) {
        this.initMap();
      }
    }
  },
  methods: {
    initMap() {
      // 手动初始化地图
      const map = this.$refs.map;
      if (map) {
        // 调用地图的初始化方法
      }
    }
  },
  mounted() {
    // 模拟异步获取经纬度
    setTimeout(() => {
      this.longitude = 116.397428;
      this.latitude = 39.90923;
    }, 1000);
  }
};
</script>