频道栏目
首页 > 程序开发 > Web开发 > ASP.Net > 正文
ASP.Net: EshineASPNet教程-商店门店地图展示
2017-01-13 11:04:00      个评论    来源:Eshine的博客  
收藏   我要投稿

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

\

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

百度地图

首先要现在百度地图申请一个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的形式实现的了。

点击复制链接 与好友分享!回本站首页
上一篇:ASP.Net前台数据校验
下一篇:ASP.NET常用前后台调用、后台执行js、弹出模态窗口
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站