ASP.Net: EshineASPNet教程-商店门店地图展示

地图作为一个主入口是互联网大公司非常重视的一块，苹果的地图当初那么烂也要弃谷歌而用自家的也是这个原因。地图用在门店位置展示上是非常刚性的需求，这个不需要多说了，这里给大家分享一个调用百度地图的实现方式。其实笔者最开始用的是谷歌地图，在谷歌推出中国后地图服务越发不稳定，不得已才改用百度地图的。当然说实话现在百度地图做的也挺好的，大商场的室内地图大家也都用过吧，还做了几个海外城市，笔者去韩国首尔旅游表示很好用，当然导航这块笔者一直用的高德，不是百度不好而是习惯问题，闲话不说了。

这里要实现的功能就像上面图片展示的，先选择省份和城市，（其实可以包括区），根据城市筛选出门店，并把每个门店都标记在地图里面，点击标记可以弹出门店的具体信息，信息还能包含链接，比如导航到门店网站，或者导航到新百度地图页面做路程规划。

百度地图

首先要现在百度地图申请一个Key大家申请一下就可以了。根据级联省市下拉框筛选出门店也不是难事，这里就分享一下怎么把门店的图标和地图做关联，并把信息放进地图的气泡里。

<script type="text/javascript" src="https://api.map.baidu.com/api?ak=你的key&v=1.5"></script>
<script src="JS/baidumap.js" type="text/javascript"></script>

首先需要加载百度地图API，还有一个baidumap.js是用来设置地图中心位置，添加Marker标记等的。

然后我们可以在网页的任何位置放置一个DIV，用代码生成一个字符串丢到DIV里面就可以了。

        StringBuilder sb = new StringBuilder();
        sb.AppendLine("<script type='text/javascript'>");
        sb.AppendLine("initMap();");

        double lat, lng, clat = 0.0, clng = 0.0;
        int index = 0;
        string letter;
        string iconimage;

        try
        {
            foreach (DataRow dr in dt.Rows)
            {
                if (index <= 26)
                {
                    letter = ((char)((int)'A' + index)).ToString();
                    iconimage = "/Images/marker/marker" + letter + ".png";
                }
                else
                {
                    iconimage = "/Images/marker/" + index + ".png";
                }

                lat = Convert.ToDouble(dr["lat"]);
                lng = Convert.ToDouble(dr["lng"]);
                clat += lat;
                clng += lng;

                string sgm = "https://map.baidu.com/m?word=" + Server.UrlEncode(dr["address"].ToString()) + "&ie=utf-8";

                sb.AppendLine("addMarker(" + lng + "," + lat + "," + index + ",'" +
                    dr["supplier"] + " " + dr["branch"] + "', '" + dr["address"] + "', '" + sgm + "');");

                index++;
            }
        }
        catch
        {
            throw new Exception ("加载地图标签出错，检查省份城市信息！");
            return -1;
        }

        clat /= dt.Rows.Count;
        clng /= dt.Rows.Count;
        sb.AppendLine("setMapcenter(" + clng + "," + clat + ");");
        sb.AppendLine("</script>");

        Literal1.Text = sb.ToString();

一开始我们建立一个StringBuilder来保存我们要放到百度地图DIV里面的内容，其实是一段JS代码，我们拼凑JS来初始化百度地图并逐条添加我们需要的记录。

clat和clng变量是最后用来表示地图中心位置的，因为我们有很多门店，我们把每个门店的经纬度值求平均作为我们地图的中心点。

iconimage也就是Marker，如果门店数量少，那么用字母从A~Z表示就足够了，但是如果门店数量超过26个，那Z以后的我们用数字来表示，代码根据这个来取Marker的图片地址。

addMarker是baidumap.js里面的函数，用来添加标记，包括标记里面的内容，可以包含链接，注意使用Server.UrlEncode，否则中文字符会处理不好。

最后StringBuilder里面的就是我们需要的JS代码丢到前端去就可以了。

谷歌地图

不在国内的话首选谷歌啊，对于谷歌地图我们有专用的工具-Subgurim.Controles，就不是用JS方式了，而是操作对象，用法如下

<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="GM1" %>

<GM1:GMap ID="GMap1" runat="server" Width="100%" Height="480" GZoom="12" />

上面是前端代码，后端如下

        GMap1.reset();

        GMap1.Add(new GControl(GControl.preBuilt.GOverviewMapControl));
        GMap1.Add(new GControl(GControl.preBuilt.LargeMapControl));

        GIcon baseIcon = new GIcon();
        baseIcon.shadow = "https://www.google.cn/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);

        GIcon letteredIcon;
        GMarker marker;
        GInfoWindow window;
        double lat, lng, clat = 0.0, clng = 0.0;
        int index = 0;
        string letter, lilist = "", ballooncontent;
        int itemik = 0, itemcm = 0, itemmn = 0;
        foreach (DataRow dr in dt.Rows)
        {
            letter = ((char)((int)'A' + index++)).ToString();
            letteredIcon = new GIcon(baseIcon);
            letteredIcon.image = "https://www.google.cn/mapfiles/marker" + letter + ".png";

            lat = Convert.ToDouble(dr["lat"]);
            lng = Convert.ToDouble(dr["lng"]);
            clat += lat;
            clng += lng;
            marker = new GMarker(new GLatLng(lat, lng), letteredIcon);

            string sgm = "https://ditu.google.cn/maps?q=" + Server.UrlEncode(Server.UrlEncode(dr["branch"].ToString())) + "&hl=zh-CN&ie=UTF8"
            + "&ll=" + lat + "," + lng + "&hq=" + Server.UrlEncode(Server.UrlEncode(dr["address"].ToString())) + "&z=15";

            ballooncontent = "<center><b>" + dr["supplier"].ToString() + "</b><br />"
                + "<A href='javascript：void(window.open(\"" + sgm + "\",\"_blank\"));'>" + dr["branch"].ToString() + "</A><br />"
                + "</center>";
            window = new GInfoWindow(marker, ballooncontent, false);
            GMap1.Add(window);
        }

        clat /= dt.Rows.Count;
        clng /= dt.Rows.Count;
        GMap1.enableHookMouseWheelToZoom = true;
        GMap1.setCenter(new GLatLng(clat, clng), 12);

思路其实是一样的，只是不是拼JS，而是直接操作GMap控件，这里的气泡是GInfoWindow，包含Marker和气泡内容，Marker就是标识的位置和用什么字母显示，ballooncontent就是气泡内容包含文本和链接，这里的链接就是以JS的形式实现的了。