合伙人运营小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.js 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. Page({
  2. data: {
  3. // 地图初始中心坐标(北京市中心)
  4. longitude: 116.404,
  5. latitude: 39.915,
  6. scale: 14,
  7. markers: [],
  8. polyline: [],
  9. startLocation: {},
  10. endLocation: {},
  11. showTripInfo: true,
  12. showCallButton: true,
  13. showDriverInfo: true,
  14. carsNearby: 0,
  15. // 司机信息
  16. driverAvatar: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  17. driverName: '王师傅',
  18. carNumber: '京A88888',
  19. estimatedArrival: 5
  20. },
  21. // 新世界百货
  22. onLoad() {
  23. // 初始化地图
  24. this.initMap();
  25. // 加载附近车辆数据
  26. this.loadNearbyCars();
  27. },
  28. // 初始化地图,获取用户位置
  29. initMap() {
  30. const that = this;
  31. // 获取用户当前位置
  32. wx.getLocation({
  33. type: 'gcj02', // 国测局坐标系,微信地图使用该坐标系
  34. success(res) {
  35. const longitude = res.longitude;
  36. const latitude = res.latitude;
  37. // 更新地图中心位置
  38. that.setData({
  39. longitude,
  40. latitude,
  41. startLocation: {
  42. longitude,
  43. latitude,
  44. name: '我的位置'
  45. },
  46. // 添加起点标记
  47. markers: [{
  48. id: 0,
  49. longitude,
  50. latitude,
  51. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  52. width: 40,
  53. height: 40,
  54. anchor: {x: 0.5, y: 1}
  55. }]
  56. });
  57. // 逆地址解析,获取位置名称
  58. that.reverseGeocoder(longitude, latitude, 'start');
  59. },
  60. fail() {
  61. wx.showToast({
  62. title: '无法获取位置,请检查权限',
  63. icon: 'none'
  64. });
  65. }
  66. });
  67. },
  68. // 逆地址解析,将经纬度转换为地址名称
  69. reverseGeocoder(longitude, latitude, type) {
  70. let _this = this
  71. wx.request({
  72. url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=VRGBZ-ZFRHB-SKIUP-NHHJ3-TXGJT-ZIFG3`,
  73. success(res) {
  74. if (res.data.status === 0) {
  75. const address = res.data.result.address;
  76. if (type === 'start') {
  77. _this.setData({
  78. 'startLocation.name': address
  79. });
  80. } else if (type === 'end') {
  81. _this.setData({
  82. 'endLocation.name': address
  83. });
  84. }
  85. }
  86. },
  87. fail() {
  88. wx.showToast({
  89. title: '地址解析失败',
  90. icon: 'none'
  91. });
  92. }
  93. });
  94. },
  95. // 更新地图标记和路线
  96. updateMarkersAndRoute() {
  97. const { startLocation, endLocation } = this.data;
  98. // 如果起点和终点都存在
  99. if (startLocation.longitude && endLocation.longitude) {
  100. // 更新标记
  101. const markers = [
  102. {
  103. id: 0,
  104. longitude: startLocation.longitude,
  105. latitude: startLocation.latitude,
  106. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  107. width: 40,
  108. height: 40,
  109. anchor: {x: 0.5, y: 1}
  110. },
  111. {
  112. id: 1,
  113. longitude: endLocation.longitude,
  114. latitude: endLocation.latitude,
  115. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/9efa1691f71a48b6ae20648c0a2dae56.png',
  116. width: 40,
  117. height: 40,
  118. anchor: {x: 0.5, y: 1}
  119. }
  120. ];
  121. // 绘制路线AI云盘
  122. const polyline = [{
  123. points: [
  124. {
  125. longitude: startLocation.longitude,
  126. latitude: startLocation.latitude
  127. },
  128. {
  129. longitude: endLocation.longitude,
  130. latitude: endLocation.latitude
  131. }
  132. ],
  133. color: "#2C85FF",
  134. width: 6,
  135. dottedLine: false
  136. }];
  137. // 计算距离和费用
  138. const distance = this.calculateDistance(
  139. startLocation.latitude, startLocation.longitude,
  140. endLocation.latitude, endLocation.longitude
  141. );
  142. // 简单的费用计算模型:起步价13元,超过3公里后每公里2.3元
  143. let price = 13;
  144. if (distance > 3) {
  145. price += (distance - 3) * 2.3;
  146. }
  147. this.setData({
  148. markers,
  149. polyline,
  150. distance: distance.toFixed(1),
  151. estimatedPrice: Math.round(price),
  152. showTripInfo: true,
  153. showCallButton: true
  154. });
  155. } else if (startLocation.longitude) {
  156. // 只有起点
  157. this.setData({
  158. markers: [{
  159. id: 0,
  160. longitude: startLocation.longitude,
  161. latitude: startLocation.latitude,
  162. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  163. width: 40,
  164. height: 40,
  165. anchor: {x: 0.5, y: 1}
  166. }],
  167. polyline: [],
  168. showTripInfo: false,
  169. showCallButton: false
  170. });
  171. }
  172. },
  173. // 计算两点之间的距离(公里)
  174. calculateDistance(lat1, lon1, lat2, lon2) {
  175. const R = 6371; // 地球半径(公里)
  176. const dLat = this.deg2rad(lat2 - lat1);
  177. const dLon = this.deg2rad(lon2 - lon1);
  178. const a =
  179. Math.sin(dLat/2) * Math.sin(dLat/2) +
  180. Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
  181. Math.sin(dLon/2) * Math.sin(dLon/2);
  182. const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  183. const distance = R * c;
  184. return distance;
  185. },
  186. // 角度转弧度
  187. deg2rad(deg) {
  188. return deg * (Math.PI/180);
  189. },
  190. // 地图区域变化时触发
  191. onRegionChange(e) {
  192. // 可以在这里处理地图移动后的逻辑,如重新加载附近车辆
  193. if (e.type === 'end' && e.causedBy === 'drag') {
  194. this.loadNearbyCars();
  195. }
  196. },
  197. // 加载附近车辆
  198. loadNearbyCars() {
  199. const { longitude, latitude } = this.data;
  200. // 模拟获取附近车辆数据
  201. // 实际应用中应该调用后端API获取真实数据
  202. const cars = [];
  203. const count = Math.floor(Math.random() * 10) + 1; // 1-10辆随机
  204. for (let i = 0; i < count; i++) {
  205. // 在当前位置附近随机生成车辆位置
  206. const offsetLon = (Math.random() - 0.5) * 0.02;
  207. const offsetLat = (Math.random() - 0.5) * 0.02;
  208. cars.push({
  209. id: 100 + i,
  210. longitude: longitude + offsetLon,
  211. latitude: latitude + offsetLat,
  212. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  213. width: 30,
  214. height: 30,
  215. anchor: {x: 0.5, y: 0.5}
  216. });
  217. }
  218. // 将车辆标记添加到现有标记中
  219. const updatedMarkers = [...this.data.markers];
  220. // 先移除之前的车辆标记
  221. const filteredMarkers = updatedMarkers.filter(marker => marker.id < 100);
  222. // 添加新的车辆标记
  223. filteredMarkers.push(...cars);
  224. this.setData({
  225. markers: filteredMarkers,
  226. carsNearby: count
  227. });
  228. },
  229. // 呼叫车辆
  230. callCar() {
  231. wx.showLoading({
  232. title: '正在呼叫车辆...',
  233. mask: true
  234. });
  235. // 模拟呼叫过程
  236. setTimeout(() => {
  237. wx.hideLoading();
  238. // 显示司机信息
  239. this.setData({
  240. showDriverInfo: true,
  241. showCallButton: false
  242. });
  243. // 模拟司机接近动画
  244. this.simulateDriverApproach();
  245. }, 2000);
  246. },
  247. // 模拟司机接近
  248. simulateDriverApproach() {
  249. const { startLocation, endLocation, markers } = this.data;
  250. let driverMarker = markers.find(marker => marker.id === 999);
  251. // 如果司机标记不存在,则创建一个
  252. if (!driverMarker) {
  253. // 从终点附近开始
  254. driverMarker = {
  255. id: 999,
  256. longitude: endLocation.longitude + (Math.random() - 0.5) * 0.01,
  257. latitude: endLocation.latitude + (Math.random() - 0.5) * 0.01,
  258. iconPath: 'https://esos-iot.bjdexn.cn/myminio/project/a0d245bf00c6493d949c3be82a6d2b98.png',
  259. width: 40,
  260. height: 40,
  261. anchor: {x: 0.5, y: 0.5}
  262. };
  263. this.setData({
  264. markers: [...markers, driverMarker]
  265. });
  266. }
  267. // 计算司机到起点的每一步
  268. const steps = 20; // 分20步接近
  269. const lonStep = (startLocation.longitude - driverMarker.longitude) / steps;
  270. const latStep = (startLocation.latitude - driverMarker.latitude) / steps;
  271. let currentStep = 0;
  272. // 更新司机位置的定时器
  273. const timer = setInterval(() => {
  274. currentStep++;
  275. if (currentStep >= steps) {
  276. clearInterval(timer);
  277. // 到达起点,更新到达时间
  278. this.setData({
  279. estimatedArrival: 0
  280. });
  281. return;
  282. }
  283. // 更新司机标记位置
  284. const updatedMarkers = this.data.markers.map(marker => {
  285. if (marker.id === 999) {
  286. return {
  287. ...marker,
  288. longitude: marker.longitude + lonStep,
  289. latitude: marker.latitude + latStep
  290. };
  291. }
  292. return marker;
  293. });
  294. // 更新预计到达时间
  295. const newArrivalTime = Math.max(0, 5 - Math.floor(currentStep / 4));
  296. this.setData({
  297. markers: updatedMarkers,
  298. estimatedArrival: newArrivalTime
  299. });
  300. }, 500);
  301. },
  302. // 取消订单
  303. cancelOrder() {
  304. // 移除司机标记
  305. const updatedMarkers = this.data.markers.filter(marker => marker.id !== 999);
  306. this.setData({
  307. showDriverInfo: false,
  308. showCallButton: true,
  309. markers: updatedMarkers
  310. });
  311. }
  312. });