如何制作京东自提点地图？我来告诉你。

教你用程序生成京东全国的自提点地图。

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.利用百度的逆向地址解析，即地址-》经纬度，得到所有配送点的经纬度，并标记显示到页面中。

如何制作京东自提点地图？ 我来告诉你。

如何制作京东自提点地图？我来告诉你。