index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!-- 地图盒子组件 -->
  2. <template name="mapBox">
  3. <view @click="toLocation()" :style="'background-image:url( '+serverUrlImg+' )'" class="box">
  4. <view style="background-color: white;padding-bottom: 20upx;" class="main_width">
  5. <view style="width: 92%;margin-left: 4%;">
  6. <view class="addr_box">
  7. <image style="width:20upx;height: 32upx;" :src="position_greenImg"></image>
  8. <view style="width: 620upx;margin-left: 15upx;">{{data.work_addr}}</view>
  9. </view>
  10. <view style="display: flex;flex-direction: row;justify-content: space-between;">
  11. <view>
  12. <view class="map_item">
  13. <image style="width: 20upx;height: 30upx;margin-right: 20upx;" src="../../static/walk.png">
  14. </image>
  15. 步行{{time1}}分钟
  16. </view>
  17. <view class="map_item">
  18. <image style="width: 29upx;height: 27upx;margin-right: 15upx;" src="/static/bicycle.png">
  19. </image>骑行{{time2}}分钟
  20. </view>
  21. </view>
  22. <view style="color: #00d29e;font-weight: bold;">距我{{distance}}km&nbsp;&nbsp;&gt;</view>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import commonData from '../../commonData.js'
  30. import commonFun from '../../commonFun.js'
  31. export default {
  32. name: "mapBox",
  33. data() {
  34. return {
  35. serverUrlImg: this.serverUrl + 'map.png',
  36. position_greenImg: this.serverUrl + 'position_green.png',
  37. data: {},
  38. distance: '--',
  39. time1: '--',
  40. time2: '--',
  41. };
  42. },
  43. props: {
  44. dataSource: {}
  45. },
  46. methods: {
  47. //进入地图
  48. toLocation() {
  49. console.log('地图页面地址信息')
  50. console.log(this.data)
  51. uni.openLocation({
  52. name: this.data.work_addr1 || '',
  53. address: this.data.work_addr,
  54. latitude: Number(this.data.work_addr_lat),
  55. longitude: Number(this.data.work_addr_lng),
  56. success: function() {
  57. console.log('success');
  58. }
  59. });
  60. },
  61. },
  62. created() {
  63. this.data = this.dataSource
  64. commonFun.getPositionLocal(res => {
  65. console.log('首页获取位置')
  66. console.log(res)
  67. this.distance = (Math.sqrt(Math.pow((Number(this.data.work_addr_lat)) - res.latitude, 2) + Math
  68. .pow(
  69. (Number(this
  70. .data.work_addr_lng)) - res.longitude, 2)) * 80).toFixed(1)
  71. // console.log('计算距离')
  72. // console.log(Number(this.data.work_addr_lat), res.latitude)
  73. // console.log(Number(this.data.work_addr_lng), res.longitude)
  74. // console.log(this.distance)
  75. this.time1 = (this.distance * 60 / 5).toFixed(1)
  76. this.time2 = (this.distance * 60 / 15).toFixed(1)
  77. })
  78. }
  79. }
  80. </script>
  81. <style>
  82. .addr_box{
  83. line-height: 45upx;font-size: 28upx;padding: 10upx 0;display: flex;align-items: center;
  84. }
  85. .box {
  86. width: 100%;
  87. height: 290upx;
  88. background-size: 100% 100%;
  89. display: flex;
  90. align-items: center;
  91. }
  92. .map_item {
  93. line-height: 60upx;
  94. color: #666666;
  95. }
  96. </style>