夏日博客

A-A+

js实现百度地图与列表联动代码

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

百度地图做开发时会有许多的一些功能要实现了,我们下面来看一篇关于百度地图与列表联动代码例子吧,具体的操作细节如下所示,在项目中,经常遇到使用地图和列表同时展示数据的时候,数据需要显示一致性,点击表格的数据,可以定位到地图,今天就分享一下这个场景的下的js操作代码.

实际上实现原理很简单，就是在表格生成的时候，给每一行添加一个事件,定位到地图.

1、生成表格数据，并生成点击事件

  1. function GetList(pIndex) {  
  2.     $.ajax({  
  3.         type: "post",  
  4.         dataType: '<a href="https://www.xiariboke.net" class="keylink" title=" JSONP" target="_blank">JSONP</a>',  
  5.         url: getApServiceUrl("GetRegionListByPage"),  
  6.         beforeSend: function () {  
  7.             $("#tbodyList").html("<tr><td colspan='8'>正在加载数据，请稍候...</td></tr>");  
  8.         },  
  9.         data: {  
  10.             Name: $("#inputName").val(),  
  11.             Type: "",  
  12.             CurrentPage: pIndex,  
  13.             PageSize: pageSize  
  14.         },  
  15.         jsonp: 'callback',  
  16.         success: function (result) {  
  17.             var region = $.parseJSON(result.jsondata);  
  18.             if (region != null) {  
  19.                 var html = "";  
  20.                 map.clearOverlays();  
  21.                 $.each(region.Instance, function (key, val) {  
  22.                     html = html + '<tr onclick="SetCenter(this,' + val.ID + ');">';  
  23.                     html = html + '  <td class="center">' + val.ID + '</td>';  
  24.                     html = html + '  <td class="center">' + val.RegionName + '</td>';  
  25.                       
  26.                     html = html + '  <td class="center">' + GetRegionType(val.Typename) + '</td>';  
  27.                     html = html + '  <td class="center">' + val.Desccontent + '</td>';  
  28.                     html = html + '  <td class="center">' + (val.ApList == null ? 0 : val.ApList.length) + '</td>';  
  29.                     html = html + '  <td class="center"><a href="RegionAdd.html?Oper=edit&Id=' + val.ID + '">编辑</a>';  
  30.                     html = html + '  <a href="javascript:void(0)" onclick="DeleteRegion(' + val.ID + ',\'' + val.RegionName + '\')">删除</a>';  
  31.                     html = html + '  <a href="RegionAdd.html?Oper=view&Id=' + val.ID + '">查看</a>';  
  32.                     html = html + '  </td></tr>';  
  33.                     PaintGraphics(val.MapInfo, val.RegionName, val.ID);  
  34.                 });  
  35.                 //循环绑定table html。没办法。  
  36.                 $("#tbodyList").html(html);  
  37.                 map.setViewport(pointArray);  
  38.             } else {  
  39.                 $("#tbodyList").html("<tr><td colspan='8'>暂无数据</td></tr>");  
  40.             }  
  41.             //设置分页  
  42.             if (currentPage == 0) {  
  43.                 var initPagination = function () {  
  44.                     // 创建分页  
  45.                     $("#Pagination").pagination(region.TotalCount, {  
  46.                         num_edge_entries: 2, //边缘页数  
  47.                         num_display_entries: 4, //主体页数  
  48.                         prev_text: "上一页",  
  49.                         next_text: "下一页",  
  50.                         callback: pageselectCallback,  
  51.                         items_per_page: pageSize //每页显示1项  
  52.                     });  
  53.                 } ();  
  54.                 currentPage = 100;  
  55.             }  
  56.         },  
  57.         complete: function (XMLHttpRequest, textStatus) { },  
  58.         error: function (e) {  
  59.             alert("获取实体列表失败，请检查输入是否正确。"); return;  
  60.         }  
  61.     });  
  62. }  

可以看到:html = html + '
'; 就是生成tr的点击事件.

2、加载地图:

  1. var map;  
  2. $(document).ready(function () {  
  3.     InitMap();   
  4. });  
  5. function InitMap() {  
  6.     if (map == null || map == "undefined") {  
  7.         //百度地图API功能  
  8.         map = new BMap.Map("allmap1");            // 创建Map实例  
  9.         map.centerAndZoom("济南", 11);  
  10.         map.enableScrollWheelZoom();                  //启用滚轮放大缩小  
  11.         map.setMaxZoom(15);  
  12.         var isOk = false;  
  13.         map.addEventListener("tilesloaded", function () { isOk = true; $('#allmap1 div.anchorBL').remove(); });  
  14.         var timer = setInterval(function () {    //开启定时器，  
  15.             if (isOk) {  
  16.                 clearInterval(timer);      
  17.                 GetList(0) ;  
  18.             }  
  19.         }, 30);   
  20.     }  
  21. }  
  22. // 编写自定义函数,创建标注  
  23. function AddMarker(point, name, status) {  
  24.     var myIcon;  
  25.     if (status == "11")  
  26.         myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
  27.             offset: new BMap.Size(10, 25), // 指定定位位置    
  28.             imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移    
  29.         });  
  30.     else if (status == "0")  
  31.         myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
  32.             offset: new BMap.Size(10, 25), // 指定定位位置    
  33.             imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移    
  34.         });  
  35.     else if (status == "1")  
  36.         myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
  37.             offset: new BMap.Size(10, 25), // 指定定位位置    
  38.             imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移    
  39.         });  
  40.     else  
  41.         myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
  42.             offset: new BMap.Size(10, 25), // 指定定位位置    
  43.             imageOffset: new BMap.Size(0, 0 - 9 * 25) // 设置图片偏移    
  44.         });  
  45.     var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注  
  46.     map.addOverlay(marker);              // 将标注添加到地图中  
  47.     var label = new BMap.Label(name, { offset: new BMap.Size(10, -10) });  // 创建文本标注对象  
  48.     label.setStyle({  
  49.         color: "#ff0000",  
  50.         //fontSize: "7px",  
  51.         backgroundColor: "0.05",  
  52.         border: "0",  
  53.         //fontWeight: "bold",  
  54.         fontFamily: "宋体"  
  55.     });  
  56.     marker.setLabel(label);  
  57.     pointArray.push(point);  
  58.     map.setViewport(pointArray);  
  59. }  
  60. // 绘制图形  
  61. function PaintGraphics(mapInfo, regionName,id) {  
  62.     if (mapInfo == "" || mapInfo == null) return;  
  63.        
  64.     var info = mapInfo.split(";");  
  65.     if (info.length == 0) return;  
  66.     var styleOptions = {  
  67.         strokeColor: "red",    //边线颜色。  
  68.         fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。  
  69.         strokeWeight: 1,       //边线的宽度，以像素为单位。  
  70.         strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。  
  71.         fillOpacity: 0.4,      //填充的透明度，取值范围0 - 1。  
  72.         strokeStyle: 'solid' //边线的样式，solid或dashed。  
  73.     }  
  74.     var index, lng, lat, point;  
  75.     if (info[0] == "circle" && info.length == 3) {  
  76.         index = info[1].indexOf(",");  
  77.         lng = info[1].substr(0, index);  
  78.         lat = info[1].substr(index + 1);  
  79.         point = new BMap.Point(lng, lat);  
  80.         var circle = new BMap.Circle(point, info[2], styleOptions);  
  81.           
  82.         map.addOverlay(circle);  
  83.     } else if (info[0] == "rectangle" && info.length == 6) {  
  84.         var points = new Array();  
  85.         for (var i = 1; i < 6; i++) {  
  86.             index = info[i].indexOf(",");  
  87.             lng = info[i].substr(0, index);  
  88.             lat = info[i].substr(index + 1);  
  89.             if (i < 5) points[i - 1] = new BMap.Point(lng, lat);  
  90.             else point = new BMap.Point(lng, lat);  
  91.         }  
  92.         var polygon = new BMap.Polygon(points, styleOptions);  
  93.         map.addOverlay(polygon);  
  94.     }  
  95.     if (point != null) {  
  96.         var opts = {  
  97.             position: point,    // 指定文本标注所在的地理位置  
  98.             offset: new BMap.Size(-10, -10)    //设置文本偏移量  
  99.         }  
  100.         var label = new BMap.Label(regionName, opts);  // 创建文本标注对象  
  101. //        label.setStyle({  
  102. //            color: "black",  
  103. //            fontSize: "12px",  
  104. //            height: "20px",  
  105. //            lineHeight: "20px",  
  106. //            fontFamily: "宋体"  
  107. //        });  
  108.         label.setStyle({  
  109.             color: "#000000",  
  110.             //fontSize: "7px",  
  111.             backgroundColor: "0.05",  
  112.             border: "0",  
  113.             //fontWeight: "bold",  
  114.             fontFamily: "宋体"  
  115.         });  
  116.         map.addOverlay(label);  
  117.         pointArray.push(point);  
  118.         dicArray.push({ Id: id, Point: point });  
  119.         //map.setViewport(pointArray);   
  120.     }  
  121. }  
  122. function SetCenter(row, id) {  
  123.     var p = null;  
  124.     for (var i = 0; i < dicArray.length; i++) {  
  125.         if (dicArray[i].Id == id) {  
  126.             p = dicArray[i].Point;  
  127.             break;  
  128.         }  
  129.     }  
  130.     if (p != null) {  
  131.         map.panTo(p);  
  132.     }  
  133.     $(row).siblings().removeClass("SelectedRow");  
  134.     $(row).addClass("SelectedRow");  
  135.        
  136. }  

函数 SetCenter(row, id) 就是设置当前区域为地图中心点.

标签：

给我留言