jQuery 怎么刷新 div
7 回复
页面源码
<%--
Created by IntelliJ IDEA.
User: Hamming
Date: 2017/2/13
Time: 11:45
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>地图展示</title>
<meta name="decorator" content="default"/>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=277707707ec24194eeffc62205476628"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<style type="text/css">
.left{border:3px solid #789 }
.main{border:3px solid #789 }
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="${ctx}/app/appLineNework/">线网管理列表</a></li>
<li><a href="${ctx}/app/appLineNework/form">线网管理添加</a></li>
<li class="active"><a href="${ctx}/app/appLineNework/amap">地图展示</a></li>
</ul>
<form:form id="searchForm" modelAttribute="appLineNework" action="${ctx}/app/appLineNework/amap" method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>工区名称：</label>
<%--<form:input path="workareaId" htmlEscape="false" maxlength="64" class="input-medium"/>--%>
<form:select path="workareaId" class="input-medium">
<form:option value="" label=""/>
<form:options items="${fns:getWorkareaList()}" itemLabel="name" itemValue="id" htmlEscape="false"/>
</form:select>
</li>
<li><label>线网名称：</label>
<%--<form:input path="name" htmlEscape="false" maxlength="64" class="input-medium"/>--%>
<form:select path="id" class="input-medium">
<form:option value="" label=""/>
<form:options items="${fns:getLineNeworkList()}" itemLabel="name" itemValue="id" htmlEscape="false"/>
</form:select>
</li>
<li id="markerRadios">
<label class="radio inline" style="width:80px;text-align:left">
<input type="radio" style="margin-top:3px" name="markerRadios" id="hd" value="" checked>隐藏
</label>
<label class="radio inline" style="width:80px;text-align:left">
<input type="radio" style="margin-top:3px" name="markerRadios" id="shot_point" value="shot_point">炮点
</label>
<label class="radio inline" style="width:80px;text-align:left">
<input type="radio" style="margin-top:3px" name="markerRadios" id="detection_point" value="detection_point">检波点
</label>
</li>
<li id="type" class="hide"><label>业务类型：</label>
<form:select path="remarks" class="input-medium">
<form:option value="" label=""/>
<form:options items="${fns:getDictList('app_shot_point')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
</li>
<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
<li class="clearfix"></li>
</ul>
</form:form>
<sys:message content="${message}"/>
<div id="container" style="top: 100px;" class="map" tabindex="0"></div>
<div class='button-group' style="background-color: #0d9bf2">
<input type='checkbox' onclick='refresh()' checked name='bg'>背景
<input type='checkbox' onclick='refresh()' checked name='road'>道路
<input type='checkbox' onclick='refresh()' checked name='building'>建筑物
<input type='checkbox' onclick='refresh()' checked name='point'>标注
</div>
<script type="text/javascript">
$(function() {
$("#markerRadios input").click(function() {
var STime = $('input:radio[id="shot_point"]:checked').val();
if (STime){
$("#type").show();
//选中时显示
}
if (STime==null){
$("#type").hide();
//为空时隐藏
}
});
});
var center = [${center}][0];
if(center){
//初始化地图
var map = new AMap.Map('container', {
resizeEnable: true,
center: center,
zoom: 11
});
function refresh() {
var boxes = document.getElementsByTagName('input');
var features = [];
for (var i = 0; i < boxes.length; i += 1) {
if (boxes[i].checked === true) {
features.push(boxes[i].name);
}
}
map.setFeatures(features);
}
paths = new Object(${paths});
if(paths){
$.each(paths, function(i, v){
var i = new AMap.Polyline(v);
i.setMap(map);
});
}
}
lnglat = new Object(${lnglat});
if (lnglat) {
//若地图未初始化则初始化
if(!center){
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 11
});
}
// var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -40)});
function addMarker(v) {
var icon ='${ctxStatic}/map/img/'+ v.icon +'.png';
var marker = new AMap.Marker({
// icon: new AMap.Icon({
// size: new AMap.Size(40, 50), //图标大小
// image: icon,
// imageOffset: new AMap.Pixel(-17, -42)
// }),
icon:icon,
position: v.lnglat,
map: map
});
AMap.event.addListener(marker, 'click', function() {
$.ajax({
type: "POST",
url: "${ctx}/app/appPointData/test",
data: { workareaId:"wid", content:"url"},
contentType: "application/json",
dataType: "json",
success:function(data,textStatus,jqXHR){
$("#num1").html(data.msg);
$("#myTab").load();
infoWindow.open(map, marker.getPosition());
/* $('.info-middle').layout({
});*/
// console.log(data);
// console.log(textStatus);
// console.log(jqXHR);
$("#num1").html(data.msg);
$("#myTab").load();
},
error:function(xhr,textStatus){
console.log('错误');
console.log(xhr);
console.log(textStatus);
},
complete:function(){
// console.log('结束');
}
});
});
}
//遍历坐标在地图上添加标识
$.each(lnglat, function (i, v) {
// console.log(v);
addMarker(v);
})
// map.setFitView();
//实例化信息窗体
var title = '标题',
content = [];
content.push("<ul id='myTab' class='nav nav-tabs'><li class='active'><a href='#num1' data-toggle='tab'>01</a></li><li><a href='#num2' data-toggle='tab'>02</a></li><li><a href='#num3' data-toggle='tab'>03 </a></li></ul>");
content.push("<div id='myTabContent' class='tab-content'><div class='tab-pane fade in active' id='num1'><p>01</p></div><div class='tab-pane fade' id='num2'><p>02</p></div><div class='tab-pane fade' id='num3'><p>03</p></div>");
content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(120, -45)
});
//构建自定义信息窗体
function createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "info";
//可以通过下面的方式修改自定义窗体的宽高
info.style.width = "800px";
info.style.padding = "20px";
info.style.border="1px solid rgba(0,0,0,.2)";
info.style.background="#ffffff"
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("span");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "http://webapi.amap.com/images/close2.gif";
closeX.onclick = closeInfoWindow;
top.style.background = "#ffffff";
top.style. margin = "0 0 20px 0";
closeX.style.float = "right";
top.appendChild(titleD);
top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "http://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
sharp.style.position="absolute";
sharp.style.left="290px";
sharp.style.bottom="-43px";
return info;
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
function refresh() {
var boxes = document.getElementsByTagName('input');
var features = [];
for (var i = 0; i < boxes.length; i += 1) {
if (boxes[i].checked === true) {
features.push(boxes[i].name);
}
}
map.setFeatures(features);
}
}
</script>
</body>
</html>
ajax发送数据请求成功了 页面更新了 但是显示的还是之前的数据
AMap.event.addListener(marker, 'click', function() {
$.ajax({
type: "POST",
url: "${ctx}/app/appPointData/test",
data: { workareaId:"wid", content:"url"},
contentType: "application/json",
dataType: "json",
success:function(data,textStatus,jqXHR){
$("#num1").html(data.msg);
$("#myTab").load();
infoWindow.open(map, marker.getPosition());
/* $('.info-middle').layout({
});*/
// console.log(data);
// console.log(textStatus);
// console.log(jqXHR);
$("#num1").html(data.msg);
$("#myTab").load();
},
error:function(xhr,textStatus){
console.log('错误');
console.log(xhr);
console.log(textStatus);
},
complete:function(){
// console.log('结束');
}
});
});
添加回复
请先登陆