You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
605 lines
16 KiB
605 lines
16 KiB
//地图属性
|
|
var district = null;
|
|
var polygons=[];
|
|
var map = null;//载体
|
|
var statellite = new AMap.TileLayer.Satellite();//卫星图定义
|
|
var scenicData;
|
|
var hotelData;
|
|
var travelagencyData;
|
|
var xclyData;
|
|
var toiletData;
|
|
var bwgData; // 博物馆
|
|
var tsgData; // 图书馆
|
|
var msgData; // 美术馆
|
|
var jyData; // 剧院
|
|
var whyzData; // 文化遗址
|
|
var totalData;
|
|
//初始化地图
|
|
function initMap(){
|
|
map = new AMap.Map('container', {
|
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
|
//zoom:10, //初始化地图层级
|
|
//center: [114.512074, 38.048178] //初始化地图中心点
|
|
});
|
|
}
|
|
|
|
//地图区域边界
|
|
//function drawBounds(dislevel,name) {
|
|
// AMap.service('AMap.DistrictSearch',function(){//回调函数
|
|
// var opts = {
|
|
// subdistrict: 0, //获取边界不需要返回下级行政区
|
|
// extensions: 'all' //返回行政区边界坐标组等具体信息
|
|
// };
|
|
// district = new AMap.DistrictSearch(opts);
|
|
// district.setLevel(dislevel);//district、city、province、country
|
|
// district.search(name, function(status, result) {
|
|
// if(polygons==null || polygons.length==0){
|
|
// map.remove(polygons)//清除上次结果
|
|
// polygons = [];
|
|
// }
|
|
// var bounds = result.districtList[0].boundaries;
|
|
// if (bounds) {
|
|
// for (var i = 0, l = bounds.length; i < l; i++) {
|
|
// //生成行政区划polygon
|
|
// var polygon = new AMap.Polygon({
|
|
// strokeWeight: 1,
|
|
// path: bounds[i],
|
|
// fillOpacity: 0,
|
|
// fillColor: '#80d8ff',
|
|
// strokeColor: '#0091ea'
|
|
// });
|
|
// polygons.push(polygon);
|
|
// }
|
|
// }
|
|
// map.add(polygons)
|
|
// //map.setFitView(polygons);//视口自适应
|
|
// });
|
|
// });
|
|
//}
|
|
|
|
//地图打点(标记)
|
|
var style = [{
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_jq_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/jingq.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
}, {
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_fd_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/zhus.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
}, {
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_lxs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/lvxs.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
}, {
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_xc_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/xiangc.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
}, {
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/ces.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},
|
|
{ //博物馆
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/bwg4.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},{
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/tsg4.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},{
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/msg4.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},{
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/jy4.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},{
|
|
// url: _CTX+"/hbcyjc/resourceNew/images/dl_cs_dian.png",
|
|
url: _CTX+"/hbcyjc/resourceNew/images/whyz4.png",
|
|
anchor: new AMap.Pixel(0, 0),
|
|
size: new AMap.Size(20,20)
|
|
},
|
|
|
|
];
|
|
//地图打点(海量点数据)
|
|
var mass;
|
|
function markPoints(marks,style){
|
|
mass = new AMap.MassMarks(marks, {
|
|
opacity: 1,
|
|
zIndex: 111,
|
|
alwaysRender:false,
|
|
cursor: 'pointer',
|
|
style: style
|
|
});
|
|
if(marks.length>0){ // 有存在没有数据的问题（如饶阳的旅行社没有）
|
|
var noclick = marks[0].style+"";
|
|
if(noclick<5&&noclick!=""&&noclick!=null&&noclick!="null"&&noclick!=undefined&&noclick!='undefined'){
|
|
mass.on('click', function (e) {
|
|
if(e.data.style==0){
|
|
mkp(e.data.uuids,e.data.style,e.data.cname,e.data.addr,e.data.logo_path,e.data.lnglat.lng,e.data.lnglat.lat);
|
|
}else{
|
|
mkp(e.data.id,e.data.style,e.data.cname,e.data.addr,e.data.logo_path,e.data.lnglat.lng,e.data.lnglat.lat);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
mass.setMap(map);
|
|
}
|
|
|
|
|
|
|
|
|
|
//资源种类切换
|
|
function setStyle(multiIcon) {
|
|
multiIcon = multiIcon ? multiIcon : 0;
|
|
$(".meu_anm a").removeClass("on");
|
|
$(".meu_anm a:eq("+ multiIcon +")").addClass("on");
|
|
|
|
map.clearMap();
|
|
if(mass){
|
|
map.remove(mass);
|
|
}
|
|
|
|
setTab('one', multiIcon + 1, 11);
|
|
|
|
if (multiIcon==null || multiIcon==undefined ||multiIcon==0) {
|
|
markPoints(totalData,style);
|
|
} else if(multiIcon==1){
|
|
markPoints(scenicData,style);
|
|
setTab('two',1,2);
|
|
jq();
|
|
}else if(multiIcon==2){
|
|
markPoints(hotelData,style);
|
|
setTab('three',1,2);
|
|
fd();
|
|
}else if(multiIcon==3){
|
|
markPoints(travelagencyData,style);
|
|
setTab('four',1,2);
|
|
lxs();
|
|
}else if(multiIcon==4){
|
|
markPoints(xclyData,style);
|
|
setTab('five',1,2);
|
|
xcly();
|
|
}else if(multiIcon==5){
|
|
markPoints(toiletData,style);
|
|
setTab('sixx',1,2);
|
|
cs();
|
|
}else if(multiIcon==6){
|
|
markPoints(bwgData,style);
|
|
setTab('seven',2,2);
|
|
bwg();
|
|
}else if(multiIcon==7){
|
|
markPoints(tsgData,style);
|
|
setTab('eight',2,2);
|
|
tsg();
|
|
}else if(multiIcon==8){
|
|
markPoints(msgData,style);
|
|
setTab('nine',2,2);
|
|
msg();
|
|
}else if(multiIcon==9){
|
|
markPoints(jyData,style);
|
|
setTab('ten',2,2);
|
|
jy();
|
|
}else if(multiIcon==10){
|
|
markPoints(whyzData,style);
|
|
setTab('eleven',2,2);
|
|
whyz();
|
|
}
|
|
drawBounds();
|
|
}
|
|
//卫星图层
|
|
function setSatellite(){
|
|
$(".hd_top_btn a:first").addClass("on");
|
|
$(".hd_top_btn a:eq(1)").removeClass("on");
|
|
map.getLayers()[0].hide();
|
|
statellite.show();
|
|
statellite.setMap(map);
|
|
}
|
|
//隐藏卫星图层
|
|
function hideSatellite(){
|
|
$(".hd_top_btn a:first").removeClass("on");
|
|
$(".hd_top_btn a:eq(1)").addClass("on");
|
|
map.getLayers()[0].show();
|
|
statellite.hide();
|
|
}
|
|
//各类旅游资源总数统计
|
|
var total = 0;
|
|
var hotelnum = 0;
|
|
var travelagencynum = 0;
|
|
var xclynum = 0;
|
|
var scenicnum = 0;
|
|
var toiletnum = 0;
|
|
function shownums(){
|
|
total = hotelnum+travelagencynum+xclynum+scenicnum+toiletnum;
|
|
var xionganname = name;
|
|
if(xionganname=="雄安新区"){
|
|
total = total+6;
|
|
}
|
|
$("#total").html(total+"个");
|
|
$("#scenicnum").html(scenicnum+"家");
|
|
$("#hotelnum").html(hotelnum+"个");
|
|
$("#travelagencynum").html(travelagencynum+"个");
|
|
$("#xclynum").html(xclynum+"个");
|
|
$("#toiletnum").html(toiletnum+"个");
|
|
}
|
|
//各地区旅游资源总数排行
|
|
function resourceslist(){
|
|
$.ajax({
|
|
url : _CTX+"/lydlxxxt/resourceslist.do",
|
|
type : 'post',
|
|
async: true,
|
|
dataType : 'json',
|
|
success : function(result){
|
|
var data = result.sort(sortNum);
|
|
var ressums = 0;
|
|
for(var i=0;i<data.length;i++){
|
|
ressums+=data[i].num;
|
|
}
|
|
var tempTotal = 0;
|
|
if (data != null && data[0] != null){
|
|
tempTotal = data[0].num;
|
|
}
|
|
|
|
var html = "";
|
|
var t = data.length<10?data.length:10;
|
|
var percent;
|
|
for(var i=0;i<data.length;i++){
|
|
percent=(data[i].num/ressums*100).toFixed(2)+"%";
|
|
|
|
var tempPercent = (data[i].num/tempTotal*100).toFixed(2)+"%";
|
|
|
|
html="<li class=\"col_jq_"+(i+1)+"\">"+
|
|
"<h3><span>"+(i+1)+"</span>"+data[i].name+"</h3>"+
|
|
"<span class=\"jd_degnum\">"+percent+"("+data[i].num+"个)"+"</span>"+
|
|
"<p style='max-width: 180px;' class=\"mnjd_bg\"> <span class=\"wd_num\" style=\"width:"+tempPercent+"\"></span> </p></li>";
|
|
$("#resourceslist").append(html);
|
|
}
|
|
},
|
|
fail:function(){
|
|
alert("获取基础信息失败");
|
|
}
|
|
});
|
|
}
|
|
function sortNum(a,b){
|
|
if(a.num){
|
|
return b.num-a.num;
|
|
}else if(a.value){
|
|
return b.value-a.value;
|
|
}
|
|
}
|
|
|
|
//资源页面查询列表功能
|
|
var statu = "";
|
|
var page = 1;
|
|
var totalpage = 0;
|
|
//初始化查询
|
|
function initpagesize(rtype){
|
|
if(rtype){
|
|
page = 1;
|
|
totalpage = 0;
|
|
if(rtype=="scenic"){
|
|
statu = "";
|
|
scenicpagelist();
|
|
}else if(rtype=="hotel"){
|
|
hotelpagelist();
|
|
}else if(rtype=="travelagency"){
|
|
travelagencypagelist();
|
|
}else if(rtype=="xcly"){
|
|
xclypagelist();
|
|
}else if(rtype=="toilet"){
|
|
toiletpagelist();
|
|
}else if(rtype=="bwg"){
|
|
bwg();
|
|
}else if(rtype=="tsg"){
|
|
tsg();
|
|
}else if(rtype=="msg"){
|
|
msg();
|
|
}else if(rtype=="whyz"){
|
|
whyz();
|
|
}else if(rtype=="jy"){
|
|
jy();
|
|
}
|
|
}
|
|
}
|
|
//上一页
|
|
function prepagelist(rtype){
|
|
if(page<=1){
|
|
return;
|
|
}else{
|
|
page--;
|
|
}
|
|
if(rtype=="scenic"){
|
|
scenicpagelist();
|
|
}else if(rtype=="hotel"){
|
|
hotelpagelist();
|
|
}else if(rtype=="travelagency"){
|
|
travelagencypagelist();
|
|
}else if(rtype=="xcly"){
|
|
xclypagelist();
|
|
}else if(rtype=="toilet"){
|
|
toiletpagelist();
|
|
}else if(rtype=="bwg"){
|
|
bwg();
|
|
}else if(rtype=="tsg"){
|
|
tsg();
|
|
}else if(rtype=="msg"){
|
|
msg();
|
|
}else if(rtype=="whyz"){
|
|
whyz();
|
|
}else if(rtype=="jy"){
|
|
jy();
|
|
}
|
|
}
|
|
//下一页
|
|
function nextpagelist(rtype){
|
|
if(page>=totalpage){
|
|
return;
|
|
}else{
|
|
page++;
|
|
}
|
|
if(rtype=="scenic"){
|
|
scenicpagelist();
|
|
}else if(rtype=="hotel"){
|
|
hotelpagelist();
|
|
}else if(rtype=="travelagency"){
|
|
travelagencypagelist();
|
|
}else if(rtype=="xcly"){
|
|
xclypagelist();
|
|
}else if(rtype=="toilet"){
|
|
toiletpagelist();
|
|
}else if(rtype=="bwg"){
|
|
bwg();
|
|
}else if(rtype=="tsg"){
|
|
tsg();
|
|
}else if(rtype=="msg"){
|
|
msg();
|
|
}else if(rtype=="whyz"){
|
|
whyz();
|
|
}else if(rtype=="jy"){
|
|
jy();
|
|
}
|
|
}
|
|
|
|
//判空并展示
|
|
function isDataEmpty(data){
|
|
if(data==null || data==undefined || data=="" || data==" " || data=="NaN"){
|
|
return "";//图片链接可用
|
|
//return "暂无数据";
|
|
}else{
|
|
return data;
|
|
}
|
|
}
|
|
|
|
//echarts柱状图（通用）
|
|
function barChart(id, title, value, barWidth,clicktype) {
|
|
var dom = document.getElementById(id);
|
|
var myChart = echarts.init(dom);
|
|
var app = {};
|
|
option = null;
|
|
option = {
|
|
backgroundColor : '',// 背景颜色透明
|
|
xAxis : {
|
|
type : 'category',
|
|
show : true, // 设置为true时候显示
|
|
axisLine : {
|
|
show : false
|
|
},
|
|
data : title,
|
|
nameLocation : 'end',// 坐标轴名称显示位置。
|
|
axisLabel : {// 坐标轴刻度标签的相关设置。
|
|
interval : 0,
|
|
rotate : "45",
|
|
color : 'white'
|
|
}
|
|
},
|
|
dataZoom: {
|
|
type: 'inside',
|
|
show: true,
|
|
realtime: true,
|
|
y: 36,
|
|
height: 20,
|
|
start: 0,
|
|
end: 50
|
|
},
|
|
yAxis : {
|
|
type : 'value',
|
|
show : false
|
|
},
|
|
tooltip : {
|
|
trigger : 'axis',
|
|
|
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
series : [ {
|
|
name : '数量',
|
|
type : 'bar',
|
|
itemStyle : {
|
|
normal : {
|
|
color : function(params) {
|
|
var colorList = [ '#FE7D38', '#FFB51A', '#A7D01A',
|
|
'#26c686', '#00d9d9', '#1bbbf8', '#2c94fc',
|
|
'#747dfa', '#975bf9', '#DE62FO', '#F9429D',
|
|
'#EF344B', '#F4E001', '#F0805A', '#26C0C0' ];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label : {
|
|
show : true,
|
|
position : 'top'
|
|
}
|
|
}
|
|
},
|
|
barWidth : barWidth,
|
|
data : value
|
|
} ]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
if(clicktype=='scenic' || clicktype=='xcly' || clicktype=='cs'){
|
|
myChart.off('click');
|
|
myChart.on('click', function (params) {
|
|
// layer.open({
|
|
// type : 2,
|
|
// title : params.name,
|
|
// area : ['75%','70%'],
|
|
// content : _CTX+'/lydlxxxt/popredirect.do?searchtype=1&resource='+clicktype+'&dname='+params.name,
|
|
// end: function(){
|
|
//
|
|
// }
|
|
// });
|
|
|
|
// layer.open({
|
|
// type : 2,
|
|
// shade: [0.7, '#333'],
|
|
// title : "",
|
|
// anim : 2,
|
|
// area : ['75%','70%'],
|
|
// content : _CTX+'/lydlxxxt/popredirect.do?searchtype=1&resource='+clicktype+'&dname='+params.name,
|
|
// });
|
|
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
//详情窗口
|
|
function pointdetail(id,style){
|
|
if(style > 4){
|
|
return;
|
|
}
|
|
if(style==0){
|
|
layer.open({
|
|
type : 2,
|
|
shade: [0.7, '#333'],
|
|
title : "",
|
|
anim : 2,
|
|
area : [ '1100px', '637px' ],
|
|
content : _CTX + "/kllstat/gotoScenicTcPage.do?scenicid="+id,
|
|
});
|
|
}else if(style==1){
|
|
//window.location.href=_CTX + "/lydlxxxt/hotelcommentdetail.do?id="+id;
|
|
window.open(_CTX + "/lyresrestaurants/gotoDetilLyResRestaurantsPage.do?lyResRestaurantsId="+id, "_blank");
|
|
}else if(style==2){
|
|
var url=_CTX + "/lytravelagency/gotoDetilLyTravelAgencyPage.do?pageType=&lyTravelAgencyId="+id;
|
|
window.open(url, "_blank");
|
|
}else if(style==3){
|
|
var url=_CTX + "/lyxcly/gotoDetilLyXclyPage.do?check=false&lyXclyId="+id;
|
|
window.open(url, "_blank");
|
|
}else if(style==4){
|
|
var url=_CTX + "/lytoilet/gotoDetilLyToiletPage.do?pageType=&lyToiletId="+id;
|
|
window.open(url, "_blank");
|
|
}
|
|
}
|
|
var marker;
|
|
//地图定位弹框(资源id，资源种类，名称，地址，图片，经纬度)
|
|
function mkp(id,style,name,addr,url,lon,lat){
|
|
clearpoints();
|
|
if(marker){
|
|
map.remove(marker);
|
|
}
|
|
|
|
var content = '';
|
|
if(style > 4){
|
|
content = "<div class=\"dl_mp_pf\" ontouchend=\"javascript:void(0)\" onclick=\"javascript:void(0)\"><div class=\"box_dl_cen\"><img src='"+url+"' onerror='beiyongimg()'>";
|
|
} else {
|
|
content = "<div class=\"dl_mp_pf\" ontouchend=\"pointdetail('"+id+"','"+style+"')\" onclick=\"javascript:pointdetail('"+id+"','"+style+"')\"><div class=\"box_dl_cen\"><img src='"+url+"' onerror='beiyongimg()'>";
|
|
}
|
|
content += "<div class=\"pf_1_title\"><p>"+name+"</p></div></div>"+
|
|
"<p class=\"pf_1_cot\">"+addr+"</p></div>";
|
|
// 创建一个 Marker 实例：
|
|
marker = new AMap.Marker({
|
|
position: [lon,lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
content: content,
|
|
offset: new AMap.Pixel(-80, -150)
|
|
});
|
|
map.setCenter([lon,lat]);
|
|
// 将创建的点标记添加到已有的地图实例：
|
|
map.add(marker);
|
|
}
|
|
|
|
//初始化资源查询的十个点
|
|
var tenmark = new Array(10);
|
|
var zIndex = 5;
|
|
//(资源id，资源种类，名称，地址，图片，经纬度,tenmark数组下标)
|
|
function initpoint(id,style,name,addr,url,lon,lat,i,level){
|
|
|
|
if(name==""||name==null||name=="null"||name==undefined||name=="undefined"){
|
|
name = "暂无";
|
|
}
|
|
|
|
if(addr==""||addr==null||addr=="null"||addr==undefined||addr=="undefined"){
|
|
addr = "暂无";
|
|
}
|
|
|
|
if(marker){
|
|
map.remove(marker);
|
|
}
|
|
|
|
var dlmppfstyle = "background-color: #794B92";
|
|
if(level == "1" || level == "A"){
|
|
dlmppfstyle = "background-color: #7371D0";
|
|
}else if(level == "2" || level == "AA"){
|
|
dlmppfstyle = "background-color: #246CC4";
|
|
}else if(level == "3" || level == "AAA"){
|
|
dlmppfstyle = "background-color: #008EBD";
|
|
}else if(level == "4" || level == "AAAA"){
|
|
dlmppfstyle = "background-color: #159985";
|
|
}else if(level == "5" || level == "AAAAA"){
|
|
dlmppfstyle = "background-color: #169C53";
|
|
}else{
|
|
dlmppfstyle = "background-color: #62637D";
|
|
}
|
|
|
|
|
|
var content="<div id =\"foremostid\">";
|
|
if(style > 4){
|
|
content += "<div class=\"dl_mp_pf\" style=\""+dlmppfstyle+"\"><div class=\"box_dl_cen\"><img onerror='beiyongimg()' src='"+url+"'>";
|
|
} else {
|
|
content += "<div class=\"dl_mp_pf\" style=\""+dlmppfstyle+"\" ontouchend=\"pointdetail('"+id+"','"+style+"')\" onclick=\"javascript:pointdetail('"+id+"','"+style+"')\"><div class=\"box_dl_cen\"><img onerror='beiyongimg()' src='"+url+"'>";
|
|
}
|
|
content += "<div class=\"pf_1_title\"><p>"+name+"</p></div></div>"+
|
|
"<p class=\"pf_1_cot\" style = \"color:#fff\">"+addr+"</p></div>" +
|
|
"</div>";
|
|
// 创建一个 Marker 实例：
|
|
tenmark[i] = new AMap.Marker({
|
|
position: [lon,lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
content: content,
|
|
offset: new AMap.Pixel(-92, -155),
|
|
zIndex : zIndex //点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示
|
|
});
|
|
AMap.event.addListener(tenmark[i], 'mouseover', function(e) {zIndex = zIndex+1;e.target.setzIndex(zIndex)}); //设置鼠标移动到该mark上时，该mark在最上方展示
|
|
map.setCenter([lon,lat]);
|
|
// 将创建的点标记添加到已有的地图实例：
|
|
map.add(tenmark[i]);
|
|
}
|
|
|
|
//清除资源点
|
|
function clearpoints(){
|
|
for(var i=0;i<tenmark.length;i++){
|
|
if(tenmark[i]){
|
|
map.remove(tenmark[i]);
|
|
}
|
|
}
|
|
tenmark = new Array(10);
|
|
}
|
|
|
|
//清除点（marker）
|
|
function qcjqd(){
|
|
map.remove(mass);
|
|
}
|
|
|
|
|
|
|
|
//弹出窗口方法均可采用jquery.html()动态生成，有时间实现
|