JavaScript code for connecting Baidu map and list

In a project, you often encounter the use of maps and lists to display data at the same time, the data needs to display consistency, click the table data, you can navigate to the map.

Today, share this scene under the JS operation code

In fact, the principle of implementation is very simple, that is, when the table is generated, add an event to each row, navigate to the map

1. Generate tabular data and generate click events

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 ' > Loading data, please wait ...</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 + ' "> Edit </a>;
html = html + ' <a href= ' javascript:void (0) "onclick=" deleteregion (' + val.id + ', \ ' + val.) Regionname + ' \ ') ' > Delete </a> ';
html = html + ' <a href= ' regionadd.html? Oper=view&id= ' + val.id + ' "> View </a>";
html = html + ' </td></tr> ';
Paintgraphics (Val. MapInfo, Val. Regionname, val.id);
});
Loops bind table HTML. No way.
$ ("#tbodyList"). HTML (HTML);
Map.setviewport (Pointarray);
} else {
$ ("#tbodyList"). HTML ("<tr><td colspan= ' 8 ' > No Data </td></tr>");
}
Set up paging
if (currentpage = = 0) {
var initpagination = function () {
Create a paging
$ ("#Pagination"). Pagination (region. TotalCount, {
Num_edge_entries:2,//Edge pages
Num_display_entries:4,//Main Page
Prev_text: "Prev",
Next_text: "Next Page",
Callback:pageselectcallback,
Items_per_page:pagesize//per page display 1 items
});
} ();
currentpage = 100;
}
},
Complete:function (XMLHttpRequest, Textstatus) {},
Error:function (e) {
Alert ("Get the list of entities failed, please check that the input is correct.") "); Return
}
});
}
can see: HTML = html + ' <tr onclick= ' setcenter (this, ' + val.id + ');  > '; is to generate a TR click event

2. Load Map:

var map;
$ (document). Ready (function () {
Initmap ();
});
function Initmap () {
if (map = = NULL | | map = = "undefined") {
Baidu Map API function
Map = new Bmap.map ("Allmap1"); Create a Map instance
Map.centerandzoom ("Jinan", 11);
Map.enablescrollwheelzoom (); Enable scroll wheel zoom zoom Out
Map.setmaxzoom (15);
var isOk = false;
Map.addeventlistener ("tilesloaded", function () {isOk = true; $ (' #allmap1 DIV.ANCHORBL '). Remove ();});
var timer = setinterval (function () {//Open timer,
if (isOk) {
Clearinterval (timer);
GetList (0);
}
}, 30);
}
}
Write a custom function to create a callout
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),//Specify location
Imageoffset:new bmap.size (0, 0-12 * 25)//Set picture offset
});
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),//Specify location
Imageoffset:new bmap.size (0, 0-11 * 25)//Set picture offset
});
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),//Specify location
Imageoffset:new bmap.size (0, 0-10 * 25)//Set picture offset
});
Else
Myicon = new Bmap.icon ("Http://api.map.baidu.com/img/markers.png", New Bmap.size (23, 25), {
Offset:new Bmap.size (10, 25),//Specify location
Imageoffset:new bmap.size (0, 0-9 * 25)//Set picture offset
});
var marker = new Bmap.marker (point, {icon:myicon}); Create annotations
Map.addoverlay (marker); Add annotations to the map
var label = new Bmap.label (name, {offset:new bmap.size (10,-10)}); Create a text callout object
Label.setstyle ({
Color: "#ff0000",
FontSize: "7px",
BackgroundColor: "0.05",
Border: "0",
FontWeight: "Bold",
fontFamily: "Song Body"
});
Marker.setlabel (label);
Pointarray.push (point);
Map.setviewport (Pointarray);
}
Drawing graphics
function Paintgraphics (MapInfo, Regionname,id) {
if (MapInfo = = "" | | MapInfo = = null) return;

var info = mapinfo.split (";");
if (Info.length = = 0) return;
var styleoptions = {
Strokecolor: "Red",//Edge color.
FillColor: "Red",//Fill color. When the argument is empty, the circle will not have a fill effect.
Strokeweight:1,//edge width, in pixels.
strokeopacity:0.8,//edge transparency, value range 0-1.
fillopacity:0.4,//Fill transparency, value range 0-1.
Strokestyle: ' Solid '//sideline style, solid or 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,//Specify the geographical location of the text callout
Offset:new Bmap.size (-10,-10)//Set text offset
}
var label = new Bmap.label (Regionname, opts); Create a text callout object
Label.setstyle ({
Color: "Black",
FontSize: "12px",
Height: "20px",
Lineheight: "20px",
fontFamily: "Song Body"
//        });
Label.setstyle ({
Color: "#000000",
FontSize: "7px",
BackgroundColor: "0.05",
Border: "0",
FontWeight: "Bold",
fontFamily: "Song Body"
});
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");

}
function SetCenter (row, id) is to set the current area as the map center point