uni-app map getCenterLocation方法无返回信息

uni-app map getCenterLocation方法无返回信息

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

window10

HBuilderX类型：

Alpha

HBuilderX版本号：

3.2.7

手机系统：

Android

手机系统版本号：

Android 9.0

手机厂商：

vivo

手机机型：

vivo Y3 4G+64G版

页面类型：

nvue

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<map id="map1" class="map1" ref="map1" v-if="latitude" :style="'width:'+windowWidth+'px;height:'+windowHeight+'px;'"  @regionchange="changeMap" scale="16" :latitude="latitude" :longitude="longitude" :markers="covers"></map>

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

操作步骤：

  1. uni.getLocation获取latitude及longitude；
  2. 手滑动地图，结束会调用regionchange方法；
  3. 在regionchange中的type为’end’后调用getCenterLocation方法，然后没有返回值。

预期结果：

预期能打印出getCenterLocation及res

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

实际结果：

结果是空的，并没有进入回调函数

bug描述：

没用返回值，很多人都遇到了这个问题吧，提了官方也没有处理，Vue页面可以有返回值，但是nvue页面是没有返回的。


更多关于uni-app map getCenterLocation方法无返回信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

这个问题有人吗- -没人

更多关于uni-app map getCenterLocation方法无返回信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html


@regionchange方法： Vue和nvue的返回参数也不一样，
nvue返回：会在滑动地图的时候，调用一次，，手放开的时候，调用一次。—有个start和end
vue返回：只会在手放开的时候，调用一次。

测试正常，未见异常

用下面的代码试试 <template>
<view>
<map id="map1" class="map1" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
<button @click=“getCenterLocation”>getCenterLocation</button>
</view>
</template>

<script> export default { data() { return { latitude: 39.925539, longitude: 116.279037 } }, onReady() { this.mapContext = uni.createMapContext("map1", this); }, methods: { getCenterLocation() { this.mapContext.getCenterLocation({ success: (res) => { console.log("getCenterLocation"); console.log(res); } }) } } } </script> <style> .map1 { width: 750rpx; height: 400px; } </style>

要报业务内部错误啊，我是最新hbuilderx,你们地图的api真的要检查下啊，好多都不能用

您这个在nvue里面获取不到经纬度，在vue里面功能正常

回复 谭小谭: 我也是报业务内部错误，请问这是处理？

经多次测试，还原bug流程：
在vue中，嵌套nvue文件(map在nvue文件中)，然后再调用getCenterLocation，就会有问题

直接在vue文件中，跳转到nvue文件(ps:如从首页直接跳转到nvue(map),不通过跳转vue，再显示nvue（map），就不会出现这个问题)

所以最好的就是，直接将需要使用map的页面，弄成nvue文件，而不是在vue中嵌入nvue，这样就能暂时解决当前问题

用subNVue方式使用map api ，点了完全没反应，还报错“TypeError: Cannot read property ‘moveToLocation’ of undefined”；用着有点难受。就一个map组件的使用浪费了很多时间

应该是版本库问题，有两种方法第一种this.$refs.map.moveToLocation这种需要在map标签上加一个ref=”map“。第二种就是在onReady()里写 mapCtx = uni.createMapContext(‘map’, this); mapCtx全局定义方便使用，然后需要用到的地方mapCtx.moveToLocation，两种方法都试一下

这个问题我的解决办法就是文件夹里面的页面后缀全部改成nvue，当然pages.json也要配置好

这是一个已知的nvue页面map组件问题。在nvue中，map组件的getCenterLocation方法确实存在回调不执行的情况，主要原因是nvue的map组件实现机制与vue页面不同。

解决方案：

  1. 使用@regionchange事件替代： 在regionchange事件的end类型中，可以直接获取地图中心点坐标：

    changeMap(e) {
  if (e.type === 'end') {
    // 这里可以直接获取地图中心点
    console.log('地图中心点：', e.detail.center)
  }
}

  2. 延迟调用getCenterLocation： 如果确实需要调用该方法，可以尝试添加延迟：

    setTimeout(() => {
  this.mapContext.getCenterLocation({
    success: (res) => {
      console.log("getCenterLocation", res);
    }
  })
}, 300)
回到顶部