教你用程序生成京东全国的自提点地图。
1.首先从下面地址爬出全国所有的自提点的地址列表
http://help.jd.com/o/help/question-897.html。
//传入上面的地址。
public void ParseMapDataListByUrl(object obj)
{
string url = string.Empty, html = string.Empty;
url = obj as string;
//这里调用的是得到此url的html内容。
html = HttpUtility.GetResultByResponse(HttpUtility.CreateGetHttpResponse(url, null, null, null));
CQ query = CQ.Create(html);
CQ table = query.Find("table.tablecss");
CQ itemList = table.Find("tr");
List<Hashtable> list = new List<Hashtable>();
for (int i = 0; i < itemList.Length; i++)
{
CQ item = table.Find("tr:eq(" + i + ")");
Hashtable itemc = new Hashtable();
string addr = item.Find("td[align='left']:eq(0)").Text().Replace("详细地址", string.Empty);
string phone = item.Find("td[align='left']:eq(1)").Text();
itemc.Add("address", addr);
itemc.Add("phone", phone);
events.OnMessageOut(string.Format("已经找到地址：{0},电话：{1}", addr, phone));
list.Add(itemc);
}
events.OnFounAddress(list);
}
2.制作基于百度地图的html模板。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak={$:mapKey}"></script> <title>地图展示</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> jQuery(function ($) { var getMapList = function () { var list = {$:jsonData}, item = null, result = []; while (item = list.shift()) { if (item.address) { result.push(item.address); } } return result; }; // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(true); var index = 0; var myGeo = new BMap.Geocoder(); var adds = getMapList(); var bdGEO = function () { var add = adds[index]; geocodeSearch(add); index++; } var geocodeSearch = function (add) { if (index < adds.length) { setTimeout(bdGEO, 400); } myGeo.getPoint(add, function (point) { if (point) { var address = new BMap.Point(point.lng, point.lat); addMarker(address, new BMap.Label(index + ":" + add, { offset: new BMap.Size(20, -10) })); } }, "北京市"); } // 编写自定义函数,创建标注 var addMarker = function (point, label) { var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(label); } bdGEO(); }); </script> </head> <body> <div id="allmap"></div> </body> </html>
3把自提点数据加载到地图模板中。使用VTemplate。
public string GetTemplateEngineData(string templetePath, string mapKey,string jsonData)
{
//创建VelocityEngine实例对象
TemplateDocument document = new TemplateDocument(templetePath, Encoding.UTF8);
//为模板变量赋值
document.Variables.SetValue("mapKey", mapKey);
document.Variables.SetValue("jsonData", jsonData);
//合并模板
StringWriter writer = new StringWriter();
document.Render(writer);
return writer.GetStringBuilder().ToString();
}
4.利用百度的逆向地址解析，即地址-》经纬度，得到所有配送点的经纬度，并标记显示到页面中。