还是用实际例子来讲比较容易理解,当然急着解决问题的话就直接去看我前端和后端代码
最近在公司做的一个项目,有个功能是在输入框输入养殖场名称,点击查询后地图定位到该养殖场。
前端页面是:
Controller是:
第一步:
在gis.html中用ajax获取这个输入框的值,也就是farmName,在点击搜索按钮后,ajax将值传给LivestockController。
给输入框定义id:suggestId,之后会根据这个id来获取输入框的值。
给按钮定义id:search-btn,动作监听。
请输入:<input type="text" id="suggestId" size="20" value="请输入搜索内容" style="width:150px;" />
<button class="layui-btn layui-btn-xs layui-btn-normal" id="search-btn" lay-filter="sumbit" >搜索</button>
第二步:
监听事件:
searchBtn.addEventListener("click", function(data) {//点击搜索
var data = document.getElementById("suggestId").value;//字段名和值
// layer.alert(data)
$.ajax({
url: "/livestock/getFarmInfoByName",
type: "post",
contentType: "application/json",
dataType:"json",
async:false,
data: JSON.stringify({ "farmName": data}),
success: function (result) {
if (result.farmLongitude != null && result.farmLatitude != null) {
// alert(result.farmLatitude)
var new_point = new BMap.Point(result.farmLongitude,result.farmLatitude);
map.centerAndZoom(new_point, 15);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
else layer.alert("此养殖场不存在")
}, error: function (err) {
layer.close(index);
layer.alert("此养殖场不存在")
}
})
});
解释:
searchBtn其实就对应的id是search-btn的按钮。我在前面定义了一下:
var searchBtn = G('search-btn');
这个路径
url: "/livestock/getFarmInfoByName"
livestock是LivestockController这个类
getFarmInfoByName是类中的getFarmInfoByName方法
第三步:
Controller获取值并返回数据
@PostMapping("getFarmInfoByName")
@RequestMapping(value="/getFarmInfoByName",method = RequestMethod.POST)
@ResponseBody
public SysFarm getFarmInfoByName(@RequestBody String str) {
JSONObject jsonObject = JSON.parseObject(str);
String farmName=jsonObject.getString("farmName");
SysFarm sysFarm = sysFarmService.findSysFarmByName(farmName);
return sysFarm;
}
在方法里,我通过前端传过来的养殖场名称,通过查询功能返回了一个Sysfarm实体类
@PostMapping("getFarmInfoByName")
@RequestMapping(value="/getFarmInfoByName",method = RequestMethod.POST)
这两个都是定位此方法的,我都丢上去了
千万别忘了参数前面要加@RequestBody,不然就算ajax传成功了,方法这边的值也是null
第四步:
其实也不能说是第四步,严格来说更像是第四流程。。
在Controller方法return了我想要获取的养殖场实体类后,接下来再回到前端ajax
这部分是成功后的操作,"result"便是Controller返回的那个数据。
因为需要定位,我采取的是通过经纬度来定位养殖场,
result.farmLongitude和result.farmLatitude
然后就是调用百度地图的API,拿过来直接用就行。
最后那行代码是实现一跳一跳的定位点。可以不用。
结果:
后续:
不好意思,忘记说了,此方法需要在pom.xml文件加上这段:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.7</version>
</dependency>
转换json用的,加上之后刷新一下maven