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

完整教程链接：ASP.Net: EshineASPNet-基于ASP.Net敏捷开发开源框架

地图作为一个主入口是互联网大公司非常重视的一块，苹果的地图当初那么烂也要弃谷歌而用自家的也是这个原因。地图用在门店位置展示上是非常刚性的需求，这个不需要多说了，这里给大家分享一个调用百度地图的实现方式。其实笔者最开始用的是谷歌地图，在谷歌推出中国后地图服务越发不稳定，不得已才改用百度地图的。当然说实话现在百度地图做的也挺好的，大商场的室内地图大家也都用过吧，还做了几个海外城市，笔者去韩国首尔旅游表示很好用，当然导航这块笔者一直用的高德，不是百度不好而是习惯问题，闲话不说了。
这里要实现的功能就像上面图片展示的，先选择省份和城市，（其实可以包括区），根据城市筛选出门店，并把每个门店都标记在地图里面，点击标记可以弹出门店的具体信息，信息还能包含链接，比如导航到门店网站，或者导航到新百度地图页面做路程规划。

百度地图

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

<script type="text/javascript" src="http://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 = "http://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 = "http://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 = "http://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 = "http://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的形式实现的了。

本教程代码参考EshineASPNet\Web\App_Code\reserveexamcommon.cs

完整教程链接：ASP.Net: EshineASPNet-基于ASP.Net敏捷开发开源框架