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

2016-02-22    编辑:kp12345     点击(
百度地图做开发时会有许多的一些功能要实现了,我们下面来看一篇关于百度地图与列表联动代码例子吧,具体的操作细节如下所示。

在项目中,经常遇到使用地图和列表同时展示数据的时候,数据需要显示一致性,点击表格的数据,可以定位到地图。

今天就分享一下这个场景的下的js操作代码

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

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


function GetList(pIndex) {
    $.ajax({
        type: "post",
        dataType: '<a href="http://www.suchso.com/UIweb/javascript-tongyuan-kuayu.html" class="keylink" title=" JSONP" target="_blank">JSONP</a>',
        url: getApServiceUrl("GetRegionListByPage"),
        beforeSend: function () {
            $("#tbodyList").html("<tr><td colspan='8'>正在加载数据,请稍候...</td></tr>");
        },
        data: {
            Name: $("#inputName").val(),
            Type: "",
            CurrentPage: pIndex,
            PageSize: pageSize
        },
        jsonp: 'callback',
        success: function (result) {
            var region = $.parseJSON(result.jsondata);
            if (region != null) {
                var html = "";
                map.clearOverlays();
                $.each(region.Instance, function (key, val) {
                    html = html + '<tr onclick="SetCenter(this,' + val.ID + ');">';
                    html = html + '  <td class="center">' + val.ID + '</td>';
                    html = html + '  <td class="center">' + val.RegionName + '</td>';
                   
                    html = html + '  <td class="center">' + GetRegionType(val.Typename) + '</td>';
                    html = html + '  <td class="center">' + val.Desccontent + '</td>';
                    html = html + '  <td class="center">' + (val.ApList == null ? 0 : val.ApList.length) + '</td>';
                    html = html + '  <td class="center"><a href="RegionAdd.html?Oper=edit&Id=' + val.ID + '">编辑</a>';
                    html = html + '  <a href="javascript:void(0)" onclick="DeleteRegion(' + val.ID + ','' + val.RegionName + '')">删除</a>';
                    html = html + '  <a href="RegionAdd.html?Oper=view&Id=' + val.ID + '">查看</a>';
                    html = html + '  </td></tr>';
                    PaintGraphics(val.MapInfo, val.RegionName, val.ID);
                });
                //循环绑定table html。没办法。
                $("#tbodyList").html(html);
                map.setViewport(pointArray);
            } else {
                $("#tbodyList").html("<tr><td colspan='8'>暂无数据</td></tr>");
            }
            //设置分页
            if (currentPage == 0) {
                var initPagination = function () {
                    // 创建分页
                    $("#Pagination").pagination(region.TotalCount, {
                        num_edge_entries: 2, //边缘页数
                        num_display_entries: 4, //主体页数
                        prev_text: "上一页",
                        next_text: "下一页",
                        callback: pageselectCallback,
                        items_per_page: pageSize //每页显示1项
                    });
                } ();
                currentPage = 100;
            }
        },
        complete: function (XMLHttpRequest, textStatus) { },
        error: function (e) {
            alert("获取实体列表失败,请检查输入是否正确。"); return;
        }
    });
}
可以看到:     html = html + '<tr onclick="SetCenter(this,' + val.ID + ');">';  就是生成tr的点击事件

2、加载地图:


var map;
$(document).ready(function () {
    InitMap();
});
function InitMap() {
    if (map == null || map == "undefined") {
        //百度地图API功能
        map = new BMap.Map("allmap1");            // 创建Map实例
        map.centerAndZoom("济南", 11);
        map.enableScrollWheelZoom();                  //启用滚轮放大缩小
        map.setMaxZoom(15);
        var isOk = false;
        map.addEventListener("tilesloaded", function () { isOk = true; $('#allmap1 div.anchorBL').remove(); });
        var timer = setInterval(function () {    //开启定时器,
            if (isOk) {
                clearInterval(timer);   
                GetList(0) ;
            }
        }, 30);
    }
}
// 编写自定义函数,创建标注
function AddMarker(point, name, status) {
    var myIcon;
    if (status == "11")
        myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置 
            imageOffset: new BMap.Size(0, 0 - 12 * 25) // 设置图片偏移 
        });
    else if (status == "0")
        myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置 
            imageOffset: new BMap.Size(0, 0 - 11 * 25) // 设置图片偏移 
        });
    else if (status == "1")
        myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置 
            imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移 
        });
    else
        myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25), // 指定定位位置 
            imageOffset: new BMap.Size(0, 0 - 9 * 25) // 设置图片偏移 
        });
    var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    var label = new BMap.Label(name, { offset: new BMap.Size(10, -10) });  // 创建文本标注对象
    label.setStyle({
        color: "#ff0000",
        //fontSize: "7px",
        backgroundColor: "0.05",
        border: "0",
        //fontWeight: "bold",
        fontFamily: "宋体"
    });
    marker.setLabel(label);
    pointArray.push(point);
    map.setViewport(pointArray);
}
// 绘制图形
function PaintGraphics(mapInfo, regionName,id) {
    if (mapInfo == "" || mapInfo == null) return;
    
    var info = mapInfo.split(";");
    if (info.length == 0) return;
    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时,圆形将没有填充效果。
        strokeWeight: 1,       //边线的宽度,以像素为单位。
        strokeOpacity: 0.8,    //边线透明度,取值范围0 - 1。
        fillOpacity: 0.4,      //填充的透明度,取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式,solid或dashed。
    }
    var index, lng, lat, point;
    if (info[0] == "circle" && info.length == 3) {
        index = info[1].indexOf(",");
        lng = info[1].substr(0, index);
        lat = info[1].substr(index + 1);
        point = new BMap.Point(lng, lat);
        var circle = new BMap.Circle(point, info[2], styleOptions);
       
        map.addOverlay(circle);
    } else if (info[0] == "rectangle" && info.length == 6) {
        var points = new Array();
        for (var i = 1; i < 6; i++) {
            index = info[i].indexOf(",");
            lng = info[i].substr(0, index);
            lat = info[i].substr(index + 1);
            if (i < 5) points[i - 1] = new BMap.Point(lng, lat);
            else point = new BMap.Point(lng, lat);
        }
        var polygon = new BMap.Polygon(points, styleOptions);
        map.addOverlay(polygon);
    }
    if (point != null) {
        var opts = {
            position: point,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(-10, -10)    //设置文本偏移量
        }
        var label = new BMap.Label(regionName, opts);  // 创建文本标注对象
//        label.setStyle({
//            color: "black",
//            fontSize: "12px",
//            height: "20px",
//            lineHeight: "20px",
//            fontFamily: "宋体"
//        });
        label.setStyle({
            color: "#000000",
            //fontSize: "7px",
            backgroundColor: "0.05",
            border: "0",
            //fontWeight: "bold",
            fontFamily: "宋体"
        });
        map.addOverlay(label);
        pointArray.push(point);
        dicArray.push({ Id: id, Point: point });
        //map.setViewport(pointArray);
    }
}
function SetCenter(row, id) {
    var p = null;
    for (var i = 0; i < dicArray.length; i++) {
        if (dicArray[i].Id == id) {
            p = dicArray[i].Point;
            break;
        }
    }
    if (p != null) {
        map.panTo(p);
    }
    $(row).siblings().removeClass("SelectedRow");
    $(row).addClass("SelectedRow");
    
}
函数 SetCenter(row, id) 就是设置当前区域为地图中心点