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

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

1.前端页面代码

　　

 1 @{
 2     Layout = null;
 3 }
 4 <!DOCTYPE html>
 5 <html>
 6 <head>
 7     <title>地图展示</title>
 8     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
 9     <script src="http://api.map.baidu.com/api?v=1.2&services=true" type="text/javascript"></script>
10     <script src="@Url.Content("~/Scripts/web/jquery.baidu.map.js")" type="text/javascript"></script>
11     <style type="text/css">
12         body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;}
13     </style>
14 </head>
15 <body>
16     <!--地图显示DIV-->
17     <div id="container">
18     </div>
19 </body>
20 
21 </html>

2.后台control实现代码

 

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 using System.Text;
 7 
 8 namespace Map.Controllers
 9 {
10     public class MapController : Controller
11     {
12         //
13         // GET: /Map/
14 
15         public ActionResult Index()
16         {
17             return View();
18         }
19 
20         [HttpGet]
21         //默认加载数据
22         public ActionResult SearchMap()
23         {
24             //默认有两个标注
25             List<Map> mapList = new List<Map>() {
26                 new Map(){ CenterLat=113.929963M, CenterLng=22.530031M, Zoom=12},
27                 new Map(){ CenterLat=113.925076M, CenterLng=22.498781M, Zoom=12}
28             };
29             StringBuilder str = new StringBuilder();
30             foreach (Map map in mapList)
31             {
32                 str.Append(string.Format("{0},{1},{2};",
33                        map.CenterLat,
34                        map.CenterLng,
35                        map.Zoom
36                       ));
37             }
38             return Json(str.ToString(), JsonRequestBehavior.AllowGet);
39         }
40     }
41 
42     //标注实体
43     public class Map
44     {
45         /// <summary>
46         /// 经度
47         /// </summary>
48         public decimal? CenterLng { get; set; }
49 
50         /// <summary>
51         /// 纬度
52         /// </summary>
53         public decimal? CenterLat { get; set; }
54 
55         /// <summary>
56         /// 比列尺
57         /// </summary>
58         public decimal? Zoom { get; set; }
59 
60     }
61 }

2.js实现代码

  1 var enableScrollWheelZoom = true;
  2 var map = null;
  3 var zoom = 15;
  4 var mapPoint = null;
  5 var enableKeyboard = true;
  6 var enableContinuousZoom = true;
  7 var enableInertialDragging = true;
  8 var CommunityList = [];//坐标数据集合
  9 var MarkerList = [];
 10 
 11 function initCommunityList(data) {
 12     CommunityList.length = 0;
 13     if ($.trim(data) != "") {
 14         var strCommunityList = data.split(";");
 15         $.each(strCommunityList, function (i, item) {
 16             if ($.trim(item) != "") {
 17                 var instance = item.split(",");
 18                 var community = new Object();
 19                 community.CenterLng = instance[0];//横坐标
 20                 community.CenterLat = instance[1];//竖坐标
 21                 community.Zoom = instance[2];     //比列尺
 22                 //如果没有坐标，则不加入标注数据
 23                 if (community.CenterLat != -1000 && community.CenterLng != -1000) {
 24                     CommunityList[CommunityList.length] = community;
 25                 }
 26             }
 27         });
 28     }
 29 }
 30 
 31 // 编写自定义函数,创建标注
 32 function addMarker(commuinity) {
 33     var marker = _createNormalMarker(commuinity);
 34     map.addOverlay(marker);
 35     MarkerList[MarkerList.length] = marker;
 36 }
 37 
 38 //刷新地图标注,以及地图定位
 39 function RefreshMarker() {
 40     ClearMarker();
 41     if (CommunityList.length > 0) {
 42         for (var index = 0; index < CommunityList.length; index++) {
 43             var community = CommunityList[index];
 44             addMarker(community);
 45         }
 46         var commuinty = CommunityList[0];
 47         var firstpoint = new BMap.Point(commuinty.CenterLng, commuinty.CenterLat);
 48         map.centerAndZoom(firstpoint, Number(community.Zoom));
 49     } else {
 50         map.centerAndZoom(mapPoint, zoom);                 // 初始化地图，设置中心点坐标和地图级别  
 51     }
 52 }
 53 
 54 //清除历史标注
 55 function ClearMarker() {
 56     if (MarkerList.length > 0) {
 57         map.clearOverlays();
 58         for (i in MarkerList) {
 59             MarkerList[i] = null;
 60         }
 61         MarkerList.length = 0;
 62     }
 63 }
 64 
 65 //创建详细标注
 66 function _createNormalMarker(commuinity) {
 67     var point = new BMap.Point(commuinity.CenterLng, commuinity.CenterLat);
 68     var marker = new BMap.Marker(point, { offset: new BMap.Size(0, 13) });
 69     marker.addEventListener("click", function (e) {
 70         var opts = {
 71             width: 400,
 72             height: 250,
 73             title: "<h3>标题</h3>"
 74         }
 75         var infoWindow = null;
 76         var content = "点击标注，成功显示纯文本信息窗口!!!";
 77         infoWindow = new BMap.InfoWindow(content, opts);
 78         map.openInfoWindow(infoWindow, e.point);
 79 
 80     });
 81     marker.tag = commuinity;
 82     map.addOverlay(marker);
 83     return marker;
 84 }
 85 
 86 window.onload = function () {
 87     try {
 88         mapPoint = new BMap.Point(114.131, 22.649);
 89         if (map == null)
 90             map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP });
 91         map.centerAndZoom(mapPoint, zoom);  // 初始化地图，设置中心点坐标和地图级别  
 92         if (enableScrollWheelZoom)
 93             map.enableScrollWheelZoom();  // 开启鼠标滚轮缩放  
 94         if (enableKeyboard)
 95             map.enableKeyboard();         // 开启键盘控制  
 96         if (enableContinuousZoom)
 97             map.enableContinuousZoom();   // 开启连续缩放效果  
 98         if (enableInertialDragging)
 99             map.enableInertialDragging(); // 开启惯性拖拽效果 
100 
101         var strUrl = "/Map/SearchMap";
102         //默认加载标注数据
103         $.getJSON(strUrl, null,
104             function (data) {
105                 initCommunityList(data);
106                 RefreshMarker();
107             });
108     }
109     catch (err) {
110         alert("百度地图加载失败,请确保你的电脑能访问百度地图!!");
111     }
112  
113 }

下载地址:http://www.kuaipan.cn/file/id_99609865076342785.htm

最终实现效果如图

 

 

 

 

 

posted @ 2012-12-13 16:21  yanggm  阅读(1695)  评论(3)  编辑  收藏  举报