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

最新推荐文章于 2021-05-07 09:58:02 发布

Eshine_Lee

最新推荐文章于 2021-05-07 09:58:02 发布

阅读量1.6k

点赞数 1

分类专栏： .Net 文章标签： asp.net 百度地图谷歌地图

本文链接：https://blog.csdn.net/lyx_zhl/article/details/54344925

版权

本文介绍了如何在ASP.NET中实现商店门店的地图展示，包括使用百度地图和谷歌地图。通过级联省市下拉框筛选门店，并在地图上标记，点击标记可查看门店详情和导航链接。详细讲解了如何加载地图API、添加Marker以及创建信息气泡。

摘要由CSDN通过智能技术生成

完整教程链接：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 (