用asp.net mvc 3加载百度地图数据(结合百度API)

深藏阁楼爱情的钟 2022-09-19 12:20 206阅读 0赞

### 前言:百度地图标注物数据加载结合百度API([http://openapi.baidu.com/map/jsdemo.htm][http_openapi.baidu.com_map_jsdemo.htm]) 和百度拾取坐标系统([http://dev.baidu.com/wiki/static/map/API/tool/getPoint/][http_dev.baidu.com_wiki_static_map_API_tool_getPoint])二者缺一不可，下面就来说说详细的调用和实现方法.(说明:用的是asp.net mvc 3) ###

#### 1.前端页面代码 ####

@{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>地图展示</title>
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script src="http://api.map.baidu.com/api?v=1.2&services=true" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/web/jquery.baidu.map.js")" type="text/javascript"></script>
        <style type="text/css">
            body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;}
        </style>
    </head>
    <body>
        
        <div id="container">
        </div>
    </body>
    
    </html>

#### 2.后台control实现代码 ####

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Text;
    
    namespace Map.Controllers
    {
        public class MapController : Controller
        {
            //
            // GET: /Map/
    
            public ActionResult Index()
            {
                return View();
            }
    
            [HttpGet]
            //默认加载数据
            public ActionResult SearchMap()
            {
                //默认有两个标注
                List<Map> mapList = new List<Map>() {
                    new Map(){ CenterLat=113.929963M, CenterLng=22.530031M, Zoom=12},
                    new Map(){ CenterLat=113.925076M, CenterLng=22.498781M, Zoom=12}
                };
                StringBuilder str = new StringBuilder();
                foreach (Map map in mapList)
                {
                    str.Append(string.Format("{0},{1},{2};",
                           map.CenterLat,
                           map.CenterLng,
                           map.Zoom
                          ));
                }
                return Json(str.ToString(), JsonRequestBehavior.AllowGet);
            }
        }
    
        //标注实体
        public class Map
        {
            /// <summary>
            /// 经度
            /// </summary>
            public decimal? CenterLng { get; set; }
    
            /// <summary>
            /// 纬度
            /// </summary>
            public decimal? CenterLat { get; set; }
    
            /// <summary>
            /// 比列尺
            /// </summary>
            public decimal? Zoom { get; set; }
    
        }
    }

#### 2.js实现代码 ####

下载地址: [http://www.kuaipan.cn/file/id\_99609865076342785.htm][http_www.kuaipan.cn_file_id_99609865076342785.htm]

最终实现效果如图

![SouthEast][]

[http_openapi.baidu.com_map_jsdemo.htm]: http://openapi.baidu.com/map/jsdemo.htm
[http_dev.baidu.com_wiki_static_map_API_tool_getPoint]: http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
[http_www.kuaipan.cn_file_id_99609865076342785.htm]: http://www.kuaipan.cn/file/id_99609865076342785.htm
[SouthEast]: /images/20220828/00446587d1804a559ebcbf7bc67e494f.png