首先,用地址生成器快速生成一张地图,网址为lbs.amap.com/console/show/tools:
高德地图 - DIY我的地图
其中key的可以用它的,也可以自己申请
下图为代码在Hbuilder运行效果,当然,需要引入jquery;
接下来,开始根据点击地址解析成经纬度:
在上面添加map.on方法:
map.on('click', function (e) {
$.ajax({
url: "getAddressBylnglat.jhtml",
type: "POST",
data: {location: e.lnglat.getLng() + "," + e.lnglat.getLat()},
dataType: "json",
cache: false,
success: function (param) {
console.log(param.regeocode.formatted_address);
$("#address").val(param.regeocode.formatted_address);
}
});
});
后端代码:
/**
* 根据经纬度得到地址
*/
@RequestMapping(value = "/getAddressBylnglat", method = RequestMethod.POST)
public @ResponseBody
String getAddressBylnglat(String location) {
StringBuffer sb = new StringBuffer();
sb.append("key=你的key&output=JSON&location=").append(location);
String param = HttpSend.getSend("http://restapi.amap.com/v3/geocode/regeo", sb.toString());//http解析
return param;
}
解析后的json数据格式如下:
地理编码代码:
/**
* 根据地址得到经纬度
*/
@RequestMapping(value = "/getLnglatByAddress", method = RequestMethod.POST)
public @ResponseBody
String getLnglatByAddress(String address) {
StringBuffer sb = new StringBuffer();
sb.append(address).append("&output=JSON&key=你的key");
String param = HttpSend.getMapSend(" http://restapi.amap.com/v3/geocode/geo?address=", sb.toString());
return param;
}
解析后的json数据格式如下:
$.ajax({ url: "getLnglatByAddress.jhtml", type: "POST", data: {address: $("#province_id").val().concat($("#city_id").val()).concat($("#area_id").val())},//获取省级联动的值, dataType: "json", cache: false, success: function (param) {//解析得到的json var a = param.geocodes[0].location.split(','); center.lat = ; center.lng = ; console.log(a[1]); map = new AMap.Map("mapContainer", { center: new AMap.LngLat(a[1],a[0]),//先经度后纬度 level: level }); map.on('complete', function () { map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () { map.addControl(new AMap.ToolBar); map.addControl(new AMap.OverView({isOpen: true})); map.addControl(new AMap.Scale); }); }) map.on('click', function (e) { $("#lat").val(e.lnglat.getLat()); $("#lng").val(e.lnglat.getLng()); $.ajax({ url: "getAddressBylnglat.jhtml", type: "POST", data: {location: e.lnglat.getLng() + "," + e.lnglat.getLat()}, dataType: "json", cache: false, success: function (param) { console.log(param.regeocode.formatted_address); $("#address").val(param.regeocode.formatted_address); } }); }); } });