用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图

先上结果：

 

 

 

　　之前 在公司业务中用过java+Selenium+ChromeDriver ，使用起来非常顺手，可以完美模拟真实的用户浏览行为。最近休息的时候想用C#也试一下，于是有了本文。

　　实现原理一样，只是由java换成了C#。（ps:个人感觉就业务开发代码来说，熟悉之后两种语言可以无缝切换。）

　　事先声明，代码中会采集用户登录咕咚网站之后的个人数据接口，如果此行为损害了咕咚网站的利益，请联系我删除或修改本文（我对采集行为一直本着每一次调用之后sleep的原则，毕竟不是为了把人家的网站搞死）。文中使用的数据是我自己的跑步数据，不涉及到其他用户的数据。

　　项目结构：为了方便跑友使用，用的winform程序，附nuget包

 

 

 以下是form1.cs的代码，删除了部分提示的 MessageBox.Show()，从产品角度来讲，应该添加loading提示和进度条，这里就只放代码了。需要安装最新的chrome浏览器+代码中使用的chromedriver是 v2.9.248315

  1 using Newtonsoft.Json;
  2 using OpenQA.Selenium;
  3 using OpenQA.Selenium.Chrome;
  4 using System;
  5 using System.Collections.Generic;
  6 using System.ComponentModel;
  7 using System.Data;
  8 using System.Drawing;
  9 using System.IO;
 10 using System.Linq;
 11 using System.Net;
 12 using System.Text;
 13 using System.Threading;
 14 using System.Threading.Tasks;
 15 using System.Windows.Forms;
 16 
 17 namespace GuDongLine
 18 {
 19 public partial class Form1 : Form
 20 {
 21 public Form1()
 22 {
 23 
 24 InitializeComponent();
 25 label2.Text = "请根据提示进行操作，本产品需要最新版本Chrome浏览器支持，网络良好的情况下运行，内部交流，不作为商业软件，如有侵权请扫中间微信二维码联系我。祝各位跑友生活愉快，身体健康，happy PB";
 26 }
 27 delegate void ChangeInvoke(int num);
 28 public int Fun1;
 29 private void button1_Click(object sender, EventArgs e)
 30 {
 31 try
 32 {
 33 Thread thread = new Thread(go);
 34 thread.Start();
 35 
 36 }
 37 catch (Exception)
 38 {
 39 MessageBox.Show("操作异常，请重新打开，或联系我");
 40 }
 41 
 42 }
 43 private void ChangeNum()
 44 {
 45 MessageBox.Show("正在运行请等待！运行完毕后会有提示！");
 46 }
 47 public void go()
 48 {
 49 if (MessageBox.Show("下面请登录咕咚，本软件只会向咕咚官网发送和接受数据，如果发现软件向其他网址发送数据，说明本软件被修改，可能有病毒", "登录咕咚账号", MessageBoxButtons.OKCancel).Equals(DialogResult.OK))
 50 {
 51 ChromeOptions options = new ChromeOptions();
 52 options.AddArguments("--test-type", "--ignore-certificate-errors");
 53 IWebDriver driver = new ChromeDriver(System.Environment.CurrentDirectory, options);
 54 driver.Url = "http://www.codoon.com/home";
 55 Thread.Sleep(10000);
 56 
 57 driver.Navigate().GoToUrl("http://www.codoon.com/gps_sports/my_routes");
 58 
 59 
 60 Thread.Sleep(5000);
 61 int runCount = int.Parse(driver.FindElement(By.Id("current_index")).Text) / 3;
 62 for (int i = 0; i < runCount + 5000; i++)
 63 {
 64 try
 65 {
 66 driver.FindElement(By.ClassName("more_data")).Click();
 67 Thread.Sleep(800);
 68 }
 69 catch (Exception)
 70 {
 71 if (i > runCount + 100)
 72 {
 73 break;
 74 }
 75 
 76 }
 77 }
 78 Thread thread2 = new Thread(ChangeNum);
 79 thread2.Start();
 80 string userId = driver.FindElement(By.ClassName("home_user_header")).GetAttribute("src").Substring(33, 36);
 81 string data = "";
 82 dynamic va = driver.FindElements(By.ClassName("detail_sports_content"));
 83 foreach (IWebElement iwe in va)
 84 {
 85 using (var client = new WebClient())
 86 {
 87 Thread.Sleep(200);
 88 var responseString = client.DownloadString("http://www.codoon.com/gps_sports/route?user_id=" + userId + "&route_id=" + iwe.FindElement(By.TagName("table")).GetAttribute("id") + "&need_next=1&_=1520349266435");
 89 
 90 
 91 var DynamicObject = JsonConvert.DeserializeObject<dynamic>(responseString);
 92 string ss = "";
 93 foreach (var s in DynamicObject.line)
 94 {
 95 ss += ((double)s[1] + 0.0062).ToString() + "," + ((double)s[0] + 0.00135).ToString() + ";";
 96 }
 97 ss = ss.Remove(ss.Length - 1);
 98 data += ss + "&";
 99 }
100 }
101 data = data.Remove(data.Length - 1);
102 driver.Close();
103 string html = @"<!DOCTYPE html><html lang='zh - CN\'>
104 <head>
105 
106 <meta charset = 'utf-8'>
107 
108 <meta http - equiv = 'X-UA-Compatible' content = 'IE=edge'>
109 
110 <meta name = 'viewport' content = 'width=device-width, initial-scale=1'>
111 
112 <title> my_all_run_lines </title>
113 
114 <link rel = 'stylesheet' href = 'http://cache.amap.com/lbs/static/main1119.css' />
115 </head>
116 <body>
117 <div id = 'container' class='container'></div>
118 <script src = 'http://webapi.amap.com/loca?key=6ac3f558819c2c4711ea0c0a37192137'></script>
119 <script src='http://a.amap.com/Loca/static/dist/jquery.min.js'></script>
120 <script>
121 
122 var map = Loca.create('container', {
123 key: '1e387d3db027b46a23600cf7f2ed7344',
124 mapStyle: 'amap://styles/grey',
125 features: ['bg', 'road'],
126 zoom: 10
127 });
128 
129 var layer = Loca.visualLayer({
130 container: map,
131 type: 'line',
132 shape: 'line',
133 });
134 
135 $.get('http://a.amap.com/Loca/static/mock/buslines.txt', function (data) {
136 data = '" + data + "';" + "" +
137 "" +
138 "" +
139 "" +
140 "" +
141 "" + @"var lines = data.split('&').map(function (item) {
142 return {
143 linePath: item.split(';').map(function(lnglat) {
144 return lnglat.split(',');
145 })
146 };
147 });
148 
149 layer.setData(lines, {
150 lnglat: 'linePath'
151 });
152 layer.setOptions({
153 style: {
154 opacity: 0.2,
155 lineWidth: 2,
156 stroke: '#b7eff7',
157 }
158 });
159 
160 layer.render();
161 })
162 
163 </script>
164 </body>
165 </html>";
166 
167 string path = System.Environment.CurrentDirectory + "\\map.html";
168 File.WriteAllText(path, html);
169 }
170 else
171 {
172 System.Environment.Exit(0);
173 }
174 }
175 
176 }
177 }
178 
179

 

 　　说一下思路:

　　　　1.确定使用的语言和采集框架。

　　　　2.确定数据来源，从咕咚app还是咕咚网站，如果咕咚网站没有提供接口，估计就得去研究app了。本文中耗费时间的一个点就在研究咕咚网站的请求数据的规则上了，原则来说，只要正常用户能打开的网页，无法挡住采集工具。

　　　　3.数据的展示：找了百度地图和高德地图的api接口，两个也都分别试了一下，其实咕咚网本身是使用的谷歌的，但是谷歌的接口研究起来不太方便，最后从数据展示的效果上选择了高德地图，顺便说一下，从咕咚采集的跑步数据其实是一组一组的经纬度坐标，而且是被阉割的经纬度，精确度不够，所以地图上显示的时候会有偏差，随着跑步距离的增长，数据量也比较大，以文中1700公里的跑量，生成的展示html是2.42M ，我家里的古董笔记本加载的时间比较长。

 

 

　　另：很久以前跟咕咚的客服打过电话，想要一个集成自己所有跑步路线的功能，貌似答应的很好，但是没发现app中有此功能（本文的由来？），当然，如果提供这个功能，一下加载这么多数据，对服务器来说不太好，但是可以迂回一下嘛，比如只生成一个月之前的？申请之后生成？个人感觉有许多解决办法，而且也能做成一种营销活动。

 

　　欢迎探讨，欢迎指教，谢谢大家，希望每一个程序员身体健康。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　by：跑过16+17北马的coder

 

　　　　

 

posted @ 2018-05-25 07:28  newjajk  阅读(7440)  评论(1)  编辑  收藏  举报