1.数据回显
//数据库里的照片回显
$.ajax({
url : "/callback",
type : "get",
dataType : "json",
success : function(data) {
var marker;
for (var i = 0; i < data.length; i++) {
var jfong = [data[i].lng, data[i].lat];
var type = data[i].type;
if (type == "猫") {
marker = new AMap.Marker({
position: jfong,
icon: catIcon,
offset: new AMap.Pixel(-13, -30),
map: map
});
console.log("猫成功!")
} else {
marker = new AMap.Marker({
position: jfong,
icon: dogIcon,
offset: new AMap.Pixel(-13, -30),
map: map
});
console.log("狗成功!")
}
marker.setMap(map);
marker.imagePath = "animalImages/" +data[i].imagePath;
marker.content = data[i].content;
marker.type=data[i].type;
marker.animalId=data[i].animalId;
marker.lng=data[i].lng;
marker.lat=data[i].lat;
marker.on('click', function (e) {
infoWindow.setContent("<div class='info-top'><div>"+e.target.type+"</div><img id='Recommend' src='https://webapi.amap.com/images/close2.gif' onclick='closeInfoWindow()'></div>"
+"<div class='info-middle' style='background-color: white'>"
+"<ul class='layui-form layui-form-pane' style='margin: 15px' id='ul1'><li></li>"
+ "<li><img id='img1' src='"+e.target.imagePath+"'/></li>"
+ "<li> <span style='color: #0f74a8'>描述: </span></li>"
+ "<li id='li1'> " + e.target.content + "</li>"
+ "<li>"
+ " <input id='recommend' type='button' onclick='recommend("+e.target.lng+","+e.target.lat+")' value='去这'/>"
+"<input type='hidden' id='delete' value='"+e.target.animalId+"'>"
+ " <input type='button' style='color: red;float: right' onclick='Delete()' value='删除'/>"
+ "</li>"
+ "</ul>"
+"</div>"
+"<div class='info-bottom' style='position: relative;top: 0px;margin: 0 auto'>"
+"<img src='https://webapi.amap.com/images/sharp.png'/>"
+ "</div>");
infoWindow.open(map, e.lnglat);
});
markers.push(marker);
} // for-end
infoWindow = new AMap.InfoWindow({
isCustom: true,
draggable: true, //是否可拖动
offset: new AMap.Pixel(0, -31),
content:""
});
}
}) // Ajax结束
//关闭信息窗口
function closeInfoWindow() {
map.clearInfoWindow();
}
这里及以下代码都用了高德API,需要到高德平台申请密钥才能使用。
用Ajax请求后台,得到数据库内的数据返回给前端。前端的每一个marker点附有自己属性的对话框,在地图上点击相应的点就可以打开对话框。用for循环遍历所有数据库内的点数据展示在地图上, marker.imagePath,marker.content 等都是表示这点的相关属性(可以自己随心定义的),用e.target.xxx来赋给每个地图上的点的对话框中相应属性。
2. 推荐线路
//显示推荐线路
function recommend(lng,lat){
//关闭信息窗口
document.getElementById("Recommend").click();
$("#panel").css("display",'block');//显示div
//骑行导航
riding = new AMap.Riding({
map: map,
panel: "panel1"
});
console.log(lnglat);
console.log("destination:"+lng+","+lat);
//根据起终点坐标规划骑行路线
riding.search(lnglat,[lng,lat], function(status, result) {
// result即是对应的骑行路线数据信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
if (status === 'complete') {
log.success('绘制骑行路线完成')
} else {
log.error('骑行路线数据查询失败' + result)
}
});
}
//清除显示推荐线路
function clearRoute(){
riding.clear();
$("#panel").css("display","none");//隐藏div
}
点击对话框中“去这”,关闭对话框,获得当前定位去相应地点的骑行线路推荐,lnglat是我的全局变量对应定位的坐标,而[lng,lat]则是对应地图上的红蓝地标坐标,线路推荐会展示在id为panel1的要素上,而panel1要素再id为panel的要素内,隐藏关闭panel,panel1也就关闭了。
3.删除功能
//删除marker
function Delete() {
layui.use('layer', function(){
var $ = layui.jquery;
// 删除操作
var sid= document.getElementById("delete").value;
layer.confirm("确认要删除吗,删除后不能恢复", { title: "删除确认" }, function (index) {
$.ajax({
type:"POST",
url: '/delete?sid='+sid, //接口请求地址
contentType:false,
processData: false,
success:function(data){
layer.msg(data);
layer.close(index)
window.setTimeout(function () {
window.location.reload();
},1500)
console.log("请求成功之后,调用接口返回的数据");
}
});
});
})
}
前端用了layUI来做确定删除提示,用Ajax将要删除的地点marker的id传给后端,后端接受数据并进行删除操作。
@ResponseBody
@RequestMapping("/delete")
public String delete(@RequestParam("sid") String sid){
int parseInt = Integer.parseInt(sid);
Integer integer = animalService.deleteAnimal(parseInt);
if(integer>0){
return "删除成功!";
}
else {
return "删除失败!";
}
}