map.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view class="map-container">
  3. <map
  4. id="map"
  5. :latitude="latitude"
  6. :longitude="longitude"
  7. scale="12"
  8. show-compass
  9. show-location
  10. :markers="markers"
  11. :polyline="polyline"
  12. style="width: 100%; height:100%;">
  13. </map>
  14. </view>
  15. </template>
  16. <script>
  17. import { getCleanWay } from '@/api/unclear.js'
  18. export default{
  19. data(){
  20. return{
  21. latitude: null, // 纬度
  22. longitude: null, // 经度
  23. markers: [
  24. // {
  25. // latitude: 34.211901, // 雁塔区
  26. // longitude: 108.995039,
  27. // width: '60rpx',
  28. // height: '60rpx',
  29. // iconPath: '/static/store.png',
  30. // label: {
  31. // content: '文本111',
  32. // bgColor: '#fff'
  33. // }
  34. // }, {
  35. // latitude: 34.296789,
  36. // longitude: 108.971456,
  37. // width: '60rpx',
  38. // height: '60rpx',
  39. // iconPath: '/static/store.png',
  40. // label: {content:'文本1', bgColor: '#fff'}
  41. // }, {
  42. // latitude: 34.293145, // 未央区政府
  43. // longitude: 108.946715,
  44. // width: '60rpx',
  45. // height: '60rpx',
  46. // iconPath: '/static/store-s.png',
  47. // label: {
  48. // content: '文本111',
  49. // bgColor: '#fff'
  50. // }
  51. // }, {
  52. // latitude: 34.313445, // 灞桥区
  53. // longitude: 109.018233,
  54. // width: '60rpx',
  55. // height: '60rpx',
  56. // iconPath: '/static/store.png',
  57. // label: {
  58. // content: '文本111',
  59. // bgColor: '#fff'
  60. // }
  61. // }
  62. ],
  63. polyline: null // 路线
  64. }
  65. },
  66. onShow() {
  67. this.getLocation()
  68. },
  69. methods: {
  70. // 获取当前位置
  71. getLocation(){
  72. const _this = this
  73. uni.getLocation({
  74. type: 'gcj02',
  75. success: function (res) {
  76. console.log(res.latitude,res.longitude)
  77. _this.latitude = res.latitude // 纬度
  78. _this.longitude = res.longitude // 经度
  79. _this.getCleanWay() // 获取个人待清运清单
  80. // _this.onPolyline()
  81. }
  82. })
  83. },
  84. //
  85. getCleanWay(){
  86. getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
  87. if(res.status == 200){
  88. this.markers = []
  89. res.data.map(item => {
  90. this.markers.push({
  91. latitude: item.lat,
  92. longitude: item.lng,
  93. width: '60rpx',
  94. height: '60rpx',
  95. iconPath: '/static/store.png',
  96. label: {
  97. content: item.stationName,
  98. bgColor: '#fff',
  99. }
  100. })
  101. })
  102. this.onPolyline()
  103. }
  104. })
  105. },
  106. // 连线
  107. onPolyline(){
  108. const _this = this
  109. // 连线需至少两个点
  110. if(_this.markers.length>0){
  111. _this.polyline = []
  112. _this.markers.map((item,index) => {
  113. _this.polyline.push({
  114. points: [
  115. {latitude: null, longitude: null},
  116. {latitude: null, longitude: null}
  117. ],
  118. width: 4,
  119. color: '#'+(~~(Math.random()*(1<<24))).toString(16)
  120. })
  121. if(index==0){
  122. _this.polyline[index].points[0].latitude = _this.latitude
  123. _this.polyline[index].points[0].longitude = _this.longitude
  124. _this.polyline[index].points[1].latitude = item.latitude
  125. _this.polyline[index].points[1].longitude = item.longitude
  126. }else{
  127. _this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
  128. _this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
  129. _this.polyline[index].points[1].latitude = item.latitude
  130. _this.polyline[index].points[1].longitude = item.longitude
  131. }
  132. })
  133. }
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss" scoped>
  139. .map-container {
  140. width: 100%;
  141. height: 100vh;
  142. }
  143. </style>