web 谷歌地图拖拽位置 uni-app 底部内容没有变化

web 谷歌地图拖拽位置 uni-app 底部内容没有变化

示例代码：

// #ifdef H5
uni.chooseLocation({
success: function(res) {
console.log(1)
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);  

that.lat = res.latitude;  
that.lng = res.longitude;  
that.districts = res.address;  
that.address = res.name  
let reg = /.+?(省|市|自治区|自治州|镇|县|区)/g;  
let arr = that.districts.match(reg);  
if(arr) {  
    that.province = arr[0];  
    that.city = arr[1];  
    that.district = arr[2];  
}  
console.log(that.districts)  
},  
});
// #endif

操作步骤：

上面视频

预期结果：

移动的时候底部内容是实时对应的

实际结果：

移动还是显示一样的内容

bug描述：

web 谷歌地图拖拽位置 底部内容没有变化

附件

信息项 详情
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 内置浏览器
HBuilderX类型 正式
HBuilderX版本号 4.76
浏览器平台 Chrome
浏览器版本 142.0.7405.3
项目创建方式 HBuilderX

更多关于web 谷歌地图拖拽位置 uni-app 底部内容没有变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于web 谷歌地图拖拽位置 uni-app 底部内容没有变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在H5平台使用uni.chooseLocation时，地图拖拽后底部内容未实时更新是已知的兼容性问题。这是因为H5端的uni.chooseLocation实际调用的是浏览器的地理位置选择接口，其行为受限于浏览器实现。

问题分析：

  1. 浏览器原生的位置选择器通常只会在最终确认位置时触发success回调，拖拽过程中不会实时返回新坐标
  2. 不同浏览器对地理位置API的支持程度不一致，Chrome可能未提供实时拖拽回调

解决方案：

  1. 改用地图组件替代：推荐使用<map>组件配合拖拽事件监听
<map 
  :latitude="lat" 
  :longitude="lng" 
  [@regionchange](/user/regionchange)="onRegionChange"
  show-location
></map>

onRegionChange(e) {
  if(e.type == 'end') {
    // 获取拖拽结束后的新坐标
    this.reverseGeocode() // 调用逆地理编码
  }
}
回到顶部