map.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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="covers"
  11. :polyline="polyline"
  12. style="width: 100%; height:100%;">
  13. </map>
  14. </view>
  15. </template>
  16. <script>
  17. export default{
  18. data(){
  19. return{
  20. latitude: null, // 纬度
  21. longitude: null, // 经度
  22. covers: [
  23. {
  24. latitude: 34.211901, // 雁塔区
  25. longitude: 108.995039,
  26. width: '72rpx',
  27. height: '72rpx',
  28. title: '21',
  29. iconPath: '/static/logo.jpg'
  30. }, {
  31. latitude: 34.296789,
  32. longitude: 108.971456,
  33. width: '72rpx',
  34. height: '72rpx',
  35. title: '22',
  36. label: {content:'文本1', color: '#ff0000'},
  37. iconPath: '/static/logo.jpg'
  38. }, {
  39. latitude: 34.293145, // 未央区政府
  40. longitude: 108.946715,
  41. width: '72rpx',
  42. height: '72rpx',
  43. title: '23',
  44. iconPath: '/static/logo.jpg'
  45. }, {
  46. latitude: 34.313445, // 灞桥区
  47. longitude: 109.018233,
  48. width: '72rpx',
  49. height: '72rpx',
  50. title: '24',
  51. iconPath: '/static/logo.jpg'
  52. }
  53. ],
  54. polyline: null // 路线
  55. }
  56. },
  57. onShow() {
  58. this.getLocation()
  59. },
  60. methods: {
  61. // 获取当前位置
  62. getLocation(){
  63. const _this = this
  64. uni.getLocation({
  65. type: 'gcj02',
  66. success: function (res) {
  67. console.log(res.latitude,res.longitude)
  68. _this.latitude = res.latitude // 纬度
  69. _this.longitude = res.longitude // 经度
  70. _this.onPolyline()
  71. }
  72. })
  73. },
  74. // 连线
  75. onPolyline(){
  76. const _this = this
  77. // 连线需至少两个点
  78. if(_this.covers.length>0){
  79. _this.polyline = []
  80. _this.covers.map((item,index) => {
  81. _this.polyline.push({
  82. points: [
  83. {latitude: null, longitude: null},
  84. {latitude: null, longitude: null}
  85. ],
  86. width: 4,
  87. color: '#'+(~~(Math.random()*(1<<24))).toString(16)
  88. })
  89. if(index==0){
  90. _this.polyline[index].points[0].latitude = _this.latitude
  91. _this.polyline[index].points[0].longitude = _this.longitude
  92. _this.polyline[index].points[1].latitude = item.latitude
  93. _this.polyline[index].points[1].longitude = item.longitude
  94. }else{
  95. _this.polyline[index].points[0].latitude = _this.covers[index-1].latitude
  96. _this.polyline[index].points[0].longitude = _this.covers[index-1].longitude
  97. _this.polyline[index].points[1].latitude = item.latitude
  98. _this.polyline[index].points[1].longitude = item.longitude
  99. }
  100. })
  101. }
  102. }
  103. }
  104. }
  105. </script>
  106. <style lang="scss" scoped>
  107. .map-container {
  108. width: 100%;
  109. height: 100vh;
  110. }
  111. </style>