【www.bbyears.com--js教程】
在项目中，经常遇到使用地图和列表同时展示数据的时候，数据需要显示一致性，点击表格的数据，可以定位到地图。
今天就分享一下这个场景的下的js操作代码
实际上实现原理很简单，就是在表格生成的时候，给每一行添加一个事件，定位到地图
1、生成表格数据，并生成点击事件
function GetList(pIndex) {
$.ajax({
type: "post",
dataType: "javascript-tongyuan-kuayu.html" class="keylink" title=" JSONP" target="_blank">JSONP",
url: getApServiceUrl("GetRegionListByPage"),
beforeSend: function () {
$("#tbodyList").html("正在加载数据，请稍候...");
},
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 + "";
html = html + " " + val.ID + "";
html = html + " " + val.RegionName + "";
html = html + " " + GetRegionType(val.Typename) + "";
html = html + " " + val.Desccontent + "";
html = html + " " + (val.ApList == null ? 0 : val.ApList.length) + "";
html = html + " 编辑";
html = html + " 删除";
html = html + " 查看";
html = html + " ";
PaintGraphics(val.MapInfo, val.RegionName, val.ID);
});
//循环绑定table html。没办法。
$("#tbodyList").html(html);
map.setViewport(pointArray);
} else {
$("#tbodyList").html("暂无数据");
}
//设置分页
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的点击事件
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) 就是设置当前区域为地图中心点