还是用实际例子来讲比较容易理解，当然急着解决问题的话就直接去看我前端和后端代码
最近在公司做的一个项目，有个功能是在输入框输入养殖场名称，点击查询后地图定位到该养殖场。
前端页面是：
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
