position.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view>
  3. <city-select
  4. @cityClick="cityClick"
  5. :formatName="formatName"
  6. :activeCity="activeCity"
  7. :hotCity="hotCity"
  8. :obtainCitys="obtainCitys"
  9. :isSearch="true"
  10. ref="citys"
  11. ></city-select>
  12. </view>
  13. </template>
  14. <script>
  15. import citys from '@/components/city-select/citySelect.js'
  16. import citySelect from '@/components/city-select/city-select.vue'
  17. // 腾讯地图
  18. var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
  19. var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
  20. export default {
  21. data() {
  22. return {
  23. //需要构建索引参数的名称(注意:传递的对象里面必须要有这个名称的参数)
  24. formatName: 'title',
  25. //当前城市
  26. activeCity: {
  27. id: 1,
  28. title: '南京'
  29. },
  30. //热门城市
  31. hotCity: [
  32. {
  33. id: 0,
  34. title: '北京'
  35. },
  36. {
  37. id: 1,
  38. title: '南京'
  39. }
  40. ],
  41. //显示的城市数据
  42. obtainCitys: [
  43. {
  44. id: 0,
  45. title: '南京'
  46. },
  47. {
  48. id: 1,
  49. title: '北京'
  50. },
  51. {
  52. id: 2,
  53. title: '天津'
  54. },
  55. {
  56. id: 3,
  57. title: '成都'
  58. },
  59. {
  60. id: 4,
  61. title: '长沙'
  62. },
  63. {
  64. id: 5,
  65. title: '贵阳'
  66. }
  67. ]
  68. }
  69. },
  70. components: {
  71. citySelect
  72. },
  73. created() {
  74. this.getCity()
  75. //动态更新数据
  76. // setTimeout(() => {
  77. // //修改需要构建索引参数的名称
  78. // this.formatName = 'cityName'
  79. // //修改当前城市
  80. // this.activeCity = {
  81. // cityName: '南京',
  82. // cityCode: 110100
  83. // }
  84. // //修改热门城市
  85. // this.hotCity = [
  86. // {
  87. // cityName: '南京',
  88. // cityCode: 110100
  89. // },
  90. // {
  91. // cityName: '北京',
  92. // cityCode: 110102
  93. // }
  94. // ]
  95. // //修改构建索引数据
  96. // this.obtainCitys = citys
  97. // uni.showToast({
  98. // icon: 'none',
  99. // title: '更新数据成功',
  100. // // #ifdef MP-WEIXIN
  101. // duration: 3000,
  102. // // #endif
  103. // mask: true
  104. // })
  105. // }, 5000)
  106. },
  107. methods: {
  108. cityClick(item) {
  109. uni.setStorageSync('city',item.title)
  110. uni.navigateBack()
  111. },
  112. getCity(){
  113. this.activeCity.title = '定位中'
  114. let that = this
  115. uni.getLocation({
  116. type: 'wgs84',
  117. geocode: true,
  118. success: (res) => {
  119. console.log("获取经纬度成功");
  120. // 解析地址
  121. qqmapsdk.reverseGeocoder({
  122. location: {
  123. latitude: res.latitude,
  124. longitude: res.longitude
  125. },
  126. success: function(res) {
  127. console.log("解析地址成功");
  128. // 市
  129. that.activeCity.title = res.result.ad_info.city.slice(0,2);
  130. },
  131. fail: function(res) {
  132. this.city = '定位失败'
  133. },
  134. complete: function(res) {
  135. console.log(res);
  136. }
  137. })
  138. },
  139. fail: () => {
  140. console.log("获取经纬度失败");
  141. },
  142. complete: () => {
  143. }
  144. })
  145. },
  146. }
  147. }
  148. </script>
  149. <style></style>