open-location.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view>
  3. <page-head :title="title"></page-head>
  4. <view class="uni-common-mt">
  5. <form @submit="openLocation">
  6. <view class="uni-list">
  7. <view class="uni-list-cell">
  8. <view class="uni-list-cell-left">
  9. <view class="uni-label">经度</view>
  10. </view>
  11. <view class="uni-list-cell-db">
  12. <input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"/>
  13. </view>
  14. </view>
  15. <view class="uni-list-cell">
  16. <view class="uni-list-cell-left">
  17. <view class="uni-label">纬度</view>
  18. </view>
  19. <view class="uni-list-cell-db">
  20. <input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"/>
  21. </view>
  22. </view>
  23. <view class="uni-list-cell">
  24. <view class="uni-list-cell-left">
  25. <view class="uni-label">位置名称</view>
  26. </view>
  27. <view class="uni-list-cell-db">
  28. <input class="uni-input" type="text" :disabled="true" value="天安门" name="name"/>
  29. </view>
  30. </view>
  31. <view class="uni-list-cell">
  32. <view class="uni-list-cell-left">
  33. <view class="uni-label">详细位置</view>
  34. </view>
  35. <view class="uni-list-cell-db">
  36. <input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"/>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="uni-padding-wrap">
  41. <view class="uni-btn-v uni-common-mt">
  42. <button type="primary" formType="submit">查看位置</button>
  43. </view>
  44. </view>
  45. </form>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. title: 'openLocation'
  54. }
  55. },
  56. methods: {
  57. openLocation: function (e) {
  58. console.log(e)
  59. var value = e.detail.value
  60. uni.openLocation({
  61. longitude: Number(value.longitude),
  62. latitude: Number(value.latitude),
  63. name: value.name,
  64. address: value.address
  65. })
  66. }
  67. }
  68. }
  69. </script>
  70. <style>
  71. .uni-list-cell-left {
  72. padding: 0 30rpx;
  73. }
  74. </style>