1.服务端带所需数据进入
@RequestMapping(value = "deploy", method = {RequestMethod.GET , RequestMethod.POST})
public String deploy(Long venderId, ModelMap model) throws Exception {
//venderId为售货机的id
model.put("venderId", venderId);
//获取到所有的商圈
model.put("tradingAreas", tradingAreaService.findAll());
//获取到售货机的基本信息
Vender vender = venderService.find(venderId);
//将售货机返回给前端
model.put("vender", vender);
return "/admin/vender/setMap";
}
2. 界面接收所需数据，加js效果，将坐标赋值给location控件
[#assign shiro=JspTaglibs["/WEB-INF/tld/shiro.tld"] /]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<title>后台管理</title><link href="${base}/resources/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
<link href="${base}/resources/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
<link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${base}/resources/admin/css/animate.css" rel="stylesheet"/>
<link href="${base}/resources/admin/css/style.css" rel="stylesheet"/>
<link href="${base}/resources/admin/css/iCheck/custom.css" rel="stylesheet"/>
<link href="${base}/resources/admin/css/chosen.css" rel="stylesheet">
<link href="${base}/resources/admin/css/skins/all.css" rel="stylesheet"/>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.tools.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery-qrcode.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.lSelect.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/input.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/iCheck/custom.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/datePicker/WdatePicker.js"></script>//引入高德js
<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.3&key=xxxxxxxxxxxxxxxxxxxx&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/pinyin.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/chosen.jquery.js"></script><style type="text/css">
.amap-marker .marker-route {
position: absolute;
width: 40px;
height: 44px;
color: #e90000;
background: url(/resources/admin/img/localtion_community.png) no-repeat;
cursor: pointer;
background-size: auto 100%;
background-position: center;
}
</style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper animated fadeInRight">
<div class="ibox-content">
<div class="row" style="padding-left:25px"></div>
<form id="inputForm" method="post">
<input type="hidden" name="id" value="${vender.id}" />//接收
<table class="input tabContent">
<tr>
<th>
商圈
</th>
<td>
<select name="tradingAreaId" data-placeholder="选择商圈" style="width:195px;" id="tradingAreaId" class="dept_select">
<option value="-1"></option>
[#list tradingAreas as tradingArea]
<option value="${tradingArea.id}">${tradingArea.name}</option>
[/#list]
</select>
</td>
</tr>
<tr>
<th>
部署地址
</th>
<td>
<input type="text" name="address" class="text" maxlength="200" value="${(vender.address)!}"/>
<span style="color:red;padding:10px;line-height:15px;display: inline-block;">请输入搜索地址</span>
</td>
</tr>
<tr>
<th>
地理位置
</th>
<td>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字：</label>
</td>
<td>
<input type="text" id="tipinput"/>
</td>
</tr>
</table>
</div>
<div id="container" style="width:500px; height:300px"></div>
<input type="hidden" name="location" class="text" value="${vender.longitude},${vender.latitude}" maxlength="200" />
</td>
</tr>
</table>
<table class="input">
<tr>
<td colspan="2" style="text-align:center;">
<input type="button" id="update" class="button" value="部署" />
</td>
</tr>
</table>
</form>
</div>
<!--ibox content end-->
</div>
</body>
</html>
<script type="text/javascript">
var longitude = "${vender.longitude}";
var latitude = "${vender.latitude}";
var centerData = $.trim(longitude).length > 0 ? [longitude, latitude] : undefined;
var marker;
var map = new AMap.Map("container", {
resizeEnable: true,
center: centerData,//地图中心点
zoom: 16 //地图显示的缩放级别
});
//标记位置
var markerPosition = function(lng, lat){
marker = new AMap.Marker({ //添加自定义点标记
map: map,
position: [lng, lat], //基点位置
zIndex: 999999,
offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
draggable: true, //是否可拖动
content: '<div class="marker-route marker-marker-bus-from"></div>' //自定义点标记覆盖物内容
});
$('input[name="location"]').val(marker.getPosition());
marker.on('dragend', function(){
$('input[name="location"]').val(marker.getPosition());
});
}
//定位成功时进行标记位置
var onComplete = function (data) {
markerPosition(data.position.getLng(), data.position.getLat())
}
//当前坐标为空时进行定位到当前位置，否则进行位置回显
if($.trim(longitude).length == 0){
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 5000, //超过10秒后停止定位，默认：无穷大
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition: 'RB',
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', function(){ //返回定位出错时使用城市中心点
geolocation.getCityInfo(function(status,result){
marker = new AMap.Marker({
map: map,
position: result.center,
zIndex: 999999,
offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
draggable: true, //是否可拖动
content: '<div class="marker-route marker-marker-bus-from"></div>'
});
});
});
});
}else{
markerPosition(longitude, latitude)
}
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var searchFun = function(adcode, keyword){
placeSearch.setCity(adcode);
placeSearch.search(keyword,function(status,result){
var first = result.poiList.pois[0];
console.log(first.location)
//移动大头针
marker.setPosition(first.location);
map.setCenter(first.location);
//将坐标放到隐藏域
$('input[name="location"]').val(marker.getPosition());
}); //关键字
}
var select = function(e) {
searchFun(e.poi.adcode, e.poi.name)
}
var placeSearch = new AMap.PlaceSearch({map: map}); //构造地点查询
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
var $address = $("input[name='address']");
var $tipinput = $("#tipinput");
var autoSearch = function(){
//var loc = window.parent.getLocation();
var searchval = $address.val();
//$tipinput.val(loc+searchval);
$tipinput.val(searchval);
//searchFun(undefined, loc + searchval)
searchFun(undefined,searchval)
//设置pinyin
if($("input[name='isCityCb'").is(":checked")){
$("#pinyin").val(chineseToPinYin(searchval))
}
}
$(function(){
$('.dept_select').chosen();
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
$("#pinyin").focus(function(){
var address = $address.val();
$(this).val(chineseToPinYin(address))
})
$(".text").blur(function(){
$(this).val($.trim($(this).val()));
})
$address.keyup(autoSearch);
$('.ibox-content input').on('ifChanged', function(event){
if(this.checked){
$("input[name='"+this.value+"']").val("true");
$(".isCity").fadeIn("fast");
}else{
$("input[name='"+this.value+"']").val("false");
$(".isCity").fadeOut("fast");
}
}).iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
$("#update").click(function(){
$.ajax({
type:"POST",
url:"${base}/admin/vender/editAddress.jhtml",
data:$("#inputForm").serialize(),
dataType:"JSON",
success:function(data){
var frameindex= parent.layer.getFrameIndex(window.name);
parent.layer.close(frameindex);
parent.location.reload();
//if(data.resultCode == 200){
// window.parent.completeUpd(data.resultContent);
//}
}
})
})
$("#tipinput").bind("keypress",function(event){
if(event.keyCode == "13"){
var loc = window.parent.getLocation();
map.getCity(function(result){
placeSearch.setCity(result.city)
placeSearch.search(loc + $tipinput.val(),function(){
//移动大头针
marker.setPosition(map.getCenter());
//将坐标放到隐藏域
$('input[name="location"]').val(marker.getPosition());
});
})
}
})
});
</script>
3.效果
8488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
