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

72 阅读 0 评论 48 点赞

我是靠谱客的博主勤劳鼠标，最近开发中收集的这篇文章主要介绍高德地图-web端根据地理编码和逆地理编码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
	<meta name="description" content="高德地图，DIY地图，自己制作地图，生成自己的高德地图">
	<title>高德地图 - DIY我的地图</title>
	<style>
		body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; min-height: 960px; min-width: 600px; }
		.my-map { margin: 0 auto; width: 600.13334px; height: 600.13334px; }
		.amap-container{height: 100%;}
	</style>
</head>
<body>
	<div id="wrap" class="my-map">
		<div id="mapContainer"></div>
	</div>
	<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
	<script>
	!function(){
		var infoWindow, map, level = 10,
			center = {lng: 113.371541, lat: 23.06686},
			features = [];

		function loadFeatures(){
			for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
				data = features[i];
				switch(data.type){
					case "Marker":
						feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
							zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
							content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
						break;
					case "Polyline":
						for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
							path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
						}
						feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
							strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
						break;
					case "Polygon":
						for(j = 0, jl = data.lnglat.length, path = []; j < jl; j++){
							path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
						}
						feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
							strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
							fillColor: data.fillColor, fillOpacity: data.fillOpacity });
						break;
					default: feature = null;
				}
				if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
			}
		}

		function mapFeatureClick(e){
			if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true}); }
			var extData = e.target.getExtData();
			infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
			infoWindow.open(map, e.lnglat);
		}

		map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level});
		
		loadFeatures();

		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);
			});	
		})
		
	}();
	</script>
</body>
</html>

	<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>其中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);
                }
            });
        });
    }
});