程序中调用高德地图

来源：互联网发布：大数据登录页面素材编辑：程序博客网时间：2024/04/30 02:54

开发需求为，点击查看详情按钮,要跳转地图，显示出人员位置。当点击按钮时，可以给它设置一个跳转链接，到js函数中处理;js发送ajax请求，到后台成功拿到经纬度以后，调用高德地图的相关接口即可。高德地图的调用可查阅高德地图的API，我这里是web端的调用，坐标与地址之间的转换，在JavaScript API中找到逆地理编码，之后要注册并申请一个key值。实现代码如下:html代码片段,

  { "sWidth":"8%", "sTitle":"人员位置","mData":"","mRender":function(data,type,row){                        var c='<a class="btn btn-xs blue" a href="javascript:regeocoder('+row.id+')""><i class="fa fa-edit"></i>查看详情</a>';                        return c;            }},

html里面的表格人员位置一列中，当点击查看详情，a链接跳转到js的函数中：

var map = new AMap.Map("map_container", {  //先在js里面定义地图        resizeEnable: true,        zoom: 18    });

 function regeocoder(id) {  //逆地理编码        $.ajax({            url:'${rc.contextPath}/visit/input/map',            type:'post',            data:{"id":id},            dataType:"json",            traditional:true,            success:function(data){                var lnglatXY = [];                console.info(data.signInLongitude);                console.info(data.signInLatitude);                lnglatXY[0]=parseFloat(data.signInLongitude); //经度                lnglatXY[1]=parseFloat(data.signInLatitude);  //纬度                console.info(lnglatXY);                var geocoder = new AMap.Geocoder({                    radius: 1000,                    extensions: "all"                });                map.clearMap();<span style="white-space:pre"></span>//清除地图上的覆盖物                var marker = new AMap.Marker({  //加点                    map: map,                    position: lnglatXY                });                map.setFitView();                $('#map_send_mess_div').modal('show');                $('#map_container').show();            }        });    }

描点以后,在弹框中显示地图:

<div id="map_send_mess_div" class="modal fade" tabindex="-1" aria-hidden="true" style="margin-top: 120px">                <div class="modal-dialog" >                    <div class="modal-content" style="width: 700px;height: 500px">                        <div class="row" id="sendMessTable">                            <div class="col-md-12" style="margin-top: 20px">                                <div class="portlet-body form">                                    <form method="POST" class="form-horizontal"  id="messform" name="messform" >                                        <div  style="position:absolute; height:470px; width:698px;overflow:auto">                                            <div id="map_container" style="height: 100%"></div>                                        </div>                                    </form>                                </div>                            </div>                        </div>                    </div>                </div>            </div>

0 0