高德地图-web端根据地理编码和逆地理编码

首先,用地址生成器快速生成一张地图,网址为lbs.amap.com/console/show/tools:




	
	
	
	高德地图 - DIY我的地图
	


	
	其中key的可以用它的,也可以自己申请

下图为代码在Hbuilder运行效果,当然,需要引入jquery;

高德地图-web端根据地理编码和逆地理编码_第1张图片


接下来,开始根据点击地址解析成经纬度:

在上面添加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数据格式如下:
高德地图-web端根据地理编码和逆地理编码_第2张图片  解析返回的字符串详情看官方文档 :   点击打开链接


 地理编码代码:

    /**
     * 根据地址得到经纬度
     */
    @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);
                }
            });
        });
    }
});





你可能感兴趣的:(学习)