uni-app 无法获取地图中心点

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

uni-app 无法获取地图中心点

开发环境 版本号 项目创建方式
Mac 14.6.1 (23G93) HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：小米

手机机型：Mix2

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：
```html
<map ref="mapId" id="mapId" [@regionchange](/user/regionchange)="regionchange" :markers="markers" :latitude="latitude"  
longitude="longitude" :enable-overlooking="true" :scale="scale"></map>

let mapContext = uni.createMapContext('mapId');  

mapContext.getCenterLocation({
success:(res)=>{
console.log(res);
}
})

操作步骤：

let mapContext = uni.createMapContext('map');  

mapContext.getCenterLocation({  
            success:(res)=>{
                console.log(res);  
            }  
        })

预期结果：

正常返回经纬度

实际结果：

{ longitude: "经度", latitude: "纬度"}

bug描述：

升级后安卓自定义基座和标准基座获取中心点返回空对象,无法正常获取中心点，地图显示正常

Harmonyos Next教程
2 回复

代码不变，文件名换成nvue就能正常获取了，但是这样要改样式


在处理 uni-app 中无法获取地图中心点的问题时，首先需要确保你正在正确地使用地图组件及其相关API。以下是一个示例代码，展示如何在 uni-app 中获取地图的中心点。

1. 在页面中使用地图组件

首先，在你的页面中添加一个地图组件。这里是一个简单的例子：

<template>
  <view>
    <map
      id="myMap"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      @tap="onMapTap"
      style="width: 100%; height: 300px;"
    ></map>
    <view>中心点坐标：{{ centerPoint.longitude }}, {{ centerPoint.latitude }}</view>
  </view>
</template>

2. 初始化地图数据

在页面的 data 函数中初始化地图的数据：

<script>
export default {
  data() {
    return {
      longitude: 116.404, // 默认经度
      latitude: 39.915,   // 默认纬度
      scale: 15,          // 默认缩放级别
      markers: [
        {
          id: 1,
          latitude: 39.915,
          longitude: 116.404,
          title: '北京'
        }
      ],
      centerPoint: {
        longitude: 0,
        latitude: 0
      }
    };
  },
  methods: {
    onMapTap(e) {
      this.centerPoint = {
        longitude: e.detail.longitude,
        latitude: e.detail.latitude
      };
      console.log('地图中心点:', this.centerPoint);
    }
  }
};
</script>

3. 处理地图点击事件

在上面的代码中，我们监听了地图的 tap 事件，并在事件处理函数中获取点击位置的经纬度，然后将其保存到 centerPoint 对象中。这样，你就可以在页面上显示地图的中心点坐标。

4. 注意事项

  • 确保你已经正确引入了地图相关的依赖，并在 manifest.json 中配置了相关的权限。
  • 如果你需要在地图移动或缩放时获取中心点，可以监听 regionchange 事件。
  • 在实际项目中，可能需要根据业务需求调整地图的默认位置、缩放级别和标记点。

通过上述步骤，你应该能够在 uni-app 中成功获取并显示地图的中心点。如果仍然遇到问题，请检查控制台是否有错误信息，并根据错误信息进一步调试。

回到顶部