在基础上添加一个输入框,商家输入酒店位置之后,传给后端具体的位置信息,例如经纬度,酒店的详细地址,可以按照以下思路来实现:
- 在页面中添加一个输入框,用于商家输入酒店的详细地址,例如:
<template>
<view>
<input v-model="address" placeholder="请输入酒店详细地址"></input>
<button @click="submit">提交</button>
</view>
</template>
- 使用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)
}
})
}
}
}
- 商家在输入酒店详细地址后,点击提交按钮,调用getLocation方法获取经纬度信息,并将经纬度信息和酒店详细地址一起提交给后端。
通过以上步骤,商家就可以在输入酒店详细地址后,自动获取对应的经纬度信息,并将经纬度信息和酒店详细地址一起提交给后端。