map.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. polyline: null // 路线
  25. }
  26. },
  27. onShow() {
  28. this.getLocation()
  29. },
  30. methods: {
  31. // 获取当前位置
  32. getLocation(){
  33. const _this = this
  34. uni.getLocation({
  35. type: 'gcj02',
  36. success: function (res) {
  37. console.log(res.latitude,res.longitude)
  38. _this.latitude = res.latitude // 纬度
  39. _this.longitude = res.longitude // 经度
  40. _this.getCleanWay() // 获取个人待清运清单
  41. }
  42. })
  43. },
  44. //
  45. getCleanWay(){
  46. getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
  47. if(res.status == 200){
  48. this.markers = []
  49. res.data.map(item => {
  50. this.markers.push({
  51. latitude: item.lat,
  52. longitude: item.lng,
  53. width: '60rpx',
  54. height: '60rpx',
  55. iconPath: '/static/store.png',
  56. label: {
  57. content: item.stationName || '--',
  58. bgColor: '#fff',
  59. }
  60. })
  61. })
  62. this.onPolyline()
  63. }
  64. })
  65. },
  66. // 连线
  67. onPolyline(){
  68. const _this = this
  69. // 连线需至少两个点
  70. if(_this.markers.length>0){
  71. _this.polyline = []
  72. _this.markers.map((item,index) => {
  73. _this.polyline.push({
  74. points: [
  75. {latitude: null, longitude: null},
  76. {latitude: null, longitude: null}
  77. ],
  78. width: 4,
  79. color: '#'+(~~(Math.random()*(1<<24))).toString(16)
  80. })
  81. if(index==0){
  82. _this.polyline[index].points[0].latitude = _this.latitude
  83. _this.polyline[index].points[0].longitude = _this.longitude
  84. _this.polyline[index].points[1].latitude = item.latitude
  85. _this.polyline[index].points[1].longitude = item.longitude
  86. }else{
  87. _this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
  88. _this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
  89. _this.polyline[index].points[1].latitude = item.latitude
  90. _this.polyline[index].points[1].longitude = item.longitude
  91. }
  92. })
  93. }
  94. }
  95. }
  96. }
  97. </script>
  98. <style lang="scss" scoped>
  99. .map-container {
  100. width: 100%;
  101. height: 100vh;
  102. }
  103. </style>