map.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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. @markertap="markertap"
  13. style="width: 100%; height:100%;">
  14. </map>
  15. </view>
  16. </template>
  17. <script>
  18. import { getCleanWay } from '@/api/unclear.js'
  19. export default{
  20. data(){
  21. return{
  22. latitude: null, // 纬度
  23. longitude: null, // 经度
  24. markers: [],
  25. polyline: null // 路线
  26. }
  27. },
  28. onShow() {
  29. this.getLocation()
  30. },
  31. methods: {
  32. // 获取当前位置
  33. getLocation(){
  34. const _this = this
  35. uni.getLocation({
  36. type: 'gcj02',
  37. success: function (res) {
  38. console.log(res.latitude,res.longitude)
  39. _this.latitude = res.latitude // 纬度
  40. _this.longitude = res.longitude // 经度
  41. _this.getCleanWay() // 获取个人待清运清单
  42. }
  43. })
  44. },
  45. // 标注点信息
  46. getCleanWay(){
  47. getCleanWay({ lng: this.longitude, lat: this.latitude }).then(res => {
  48. if(res.status == 200){
  49. this.markers = []
  50. res.data.map((item, index) => {
  51. this.markers.push({
  52. id: index+1,
  53. latitude: item.lat,
  54. longitude: item.lng,
  55. width: '60rpx',
  56. height: '60rpx',
  57. iconPath: '/static/store.png',
  58. label: {
  59. content: item.stationName || '--',
  60. bgColor: '#fff',
  61. }
  62. })
  63. })
  64. this.onPolyline()
  65. }
  66. })
  67. },
  68. // 连线
  69. onPolyline(){
  70. const _this = this
  71. // 连线需至少两个点
  72. if(_this.markers.length>0){
  73. _this.polyline = []
  74. _this.markers.map((item,index) => {
  75. _this.polyline.push({
  76. points: [
  77. {latitude: null, longitude: null},
  78. {latitude: null, longitude: null}
  79. ],
  80. arrowLine: true,
  81. width: 6,
  82. color: '#07c160'
  83. })
  84. if(index==0){
  85. _this.polyline[index].points[0].latitude = _this.latitude
  86. _this.polyline[index].points[0].longitude = _this.longitude
  87. _this.polyline[index].points[1].latitude = item.latitude
  88. _this.polyline[index].points[1].longitude = item.longitude
  89. }else{
  90. _this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
  91. _this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
  92. _this.polyline[index].points[1].latitude = item.latitude
  93. _this.polyline[index].points[1].longitude = item.longitude
  94. }
  95. })
  96. }
  97. },
  98. // 点击标注点,调用第三方地图查看规划路线
  99. markertap(e){
  100. this.markers.map(item => {
  101. if(item.id == e.detail.markerId){
  102. uni.openLocation({
  103. latitude: item.latitude,
  104. longitude: item.longitude,
  105. success: function () {
  106. console.log('success');
  107. }
  108. })
  109. }
  110. })
  111. }
  112. }
  113. }
  114. </script>
  115. <style lang="scss" scoped>
  116. .map-container {
  117. width: 100%;
  118. height: 100vh;
  119. }
  120. </style>