如何在uniapp中实现商家上传酒店位置信息,包括经纬度和详细地址

在基础上添加一个输入框,商家输入酒店位置之后,传给后端具体的位置信息,例如经纬度,酒店的详细地址,可以按照以下思路来实现:

  1. 在页面中添加一个输入框,用于商家输入酒店的详细地址,例如:
<template>
  <view>
    <input v-model="address" placeholder="请输入酒店详细地址"></input>
    <button @click="submit">提交</button>
  </view>
</template>
  1. 使用uniapp的地图组件和定位API获取商家输入的地址对应的经纬度信息,例如:
export default {
    
    
  data() {
    
    
    return {
    
    
      address: '',
      longitude: 0,
      latitude: 0
    }
  },
  methods: {
    
    
    // 获取经纬度信息
    getLocation() {
    
    
      uni.getLocation({
    
    
        type: 'gcj02',
        geocode: true,
        address: this.address,
        success: res => {
    
    
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.submit()
        }
      })
    },
    // 提交酒店信息
    submit() {
    
    
      uni.request({
    
    
        url: 'http://example.com/api/hotel',
        method: 'POST',
        data: {
    
    
          hotelName: this.hotelName,
          longitude: this.longitude,
          latitude: this.latitude,
          address: this.address
        },
        success: res => {
    
    
          console.log(res)
        }
      })
    }
  }
}
  1. 商家在输入酒店详细地址后,点击提交按钮,调用getLocation方法获取经纬度信息,并将经纬度信息和酒店详细地址一起提交给后端。

通过以上步骤,商家就可以在输入酒店详细地址后,自动获取对应的经纬度信息,并将经纬度信息和酒店详细地址一起提交给后端。

猜你喜欢

转载自blog.csdn.net/weixin_63929524/article/details/130759239