欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-29 21:05:49
地图作为一个主入口是互联网大公司非常重视的一块,苹果的地图当初那么烂也要弃谷歌而用自家的也是这个原因。地图用在门店位置展示上是非常刚性的需求,这个不需要多说了,这里给大家分享一个调...

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

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的形式实现的了。