uni-app中map组件怎么获取宽高及controls控件位置如何放置在右下角展示？

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

uni-app中map组件怎么获取宽高及controls控件位置如何放置在右下角展示？

已知controls控件position属性只有top和left属性可选，而且只支持Number类型值，就是说若想在地图中展示必须使用px来控制controls显示位置，但是却又拿不到map的宽高，所以怎么来保障controls控件一直显示在右下角？请给出一个全端都适配的方案。

信息项 信息内容
开发环境
版本号
项目创建
Harmonyos Next教程
1 回复

在uni-app中，你可以通过一些方法获取map组件的宽高以及将controls控件放置在右下角。以下是如何实现这些功能的代码示例。

获取map组件的宽高

首先，在uni-app中，直接获取组件的宽高并不像原生JavaScript那样方便，但我们可以通过一些间接的方法来实现。一个常见的方法是使用onReady生命周期函数，并结合样式和计算属性。

<template>
  <view class="container">
    <map id="myMap" ref="myMap" :style="{width: mapWidth + 'px', height: mapHeight + 'px'}">
      <!-- map content -->
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapWidth: 300, // 默认宽度
      mapHeight: 200, // 默认高度
    };
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#myMap').boundingClientRect(data => {
      this.mapWidth = data.width;
      this.mapHeight = data.height;
      console.log('Map Width:', this.mapWidth, 'Map Height:', this.mapHeight);
    }).exec();
  },
};
</script>

<style>
.container {
  position: relative;
}
map {
  width: 100%; /* 根据需要调整 */
  height: 100%; /* 根据需要调整 */
}
</style>

将controls控件放置在右下角

在uni-app的map组件中，你可以使用controls属性来添加自定义控件。要将控件放置在右下角，可以通过设置控件的样式来实现。

<template>
  <map id="myMap" :style="{width: '100%', height: '100%'}" :controls="controls">
    <!-- map content -->
  </map>
</template>

<script>
export default {
  data() {
    return {
      controls: [
        {
          id: 1,
          position: {
            left: 0, // 初始位置，稍后在mounted中调整
            top: 0, // 初始位置，稍后在mounted中调整
            width: 50,
            height: 50,
          },
          iconPath: '/static/location.png', // 控件图片路径
          clickable: true,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select('#myMap').boundingClientRect(data => {
        this.controls[0].position.left = data.width - 50 - 10; // 减去控件宽度和适当的外边距
        this.controls[0].position.top = data.height - 50 - 10; // 减去控件高度和适当的外边距
      }).exec();
    });
  },
};
</script>

上述代码示例展示了如何在uni-app中获取map组件的宽高，并将一个自定义控件放置在map的右下角。通过boundingClientRect方法可以获取组件的实际宽高，然后根据这些信息调整控件的位置。

回到顶部