程序中调用高德地图

程序中调用高德地图_第1张图片
开发需求为,点击查看详情按钮,要跳转地图,显示出人员位置。当点击按钮时,可以给它设置一个跳转链接,到js函数中处理;js发送ajax请求,到后台成功拿到经纬度以后,调用高德地图的相关接口即可。高德地图的调用可查阅高德地图的API,我这里是web端的调用,坐标与地址之间的转换,在JavaScript API中找到逆地理编码,之后要注册并申请一个key值。实现代码如下:html代码片段,
  { "sWidth":"8%", "sTitle":"人员位置","mData":"","mRender":function(data,type,row){
                        var c='查看详情';
                        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();			//清除地图上的覆盖物
                var marker = new AMap.Marker({  //加点
                    map: map,
                    position: lnglatXY
                });
                map.setFitView();
                $('#map_send_mess_div').modal('show');
                $('#map_container').show();
            }
        });
    }
描点以后,在弹框中显示地图:



你可能感兴趣的:(高德地图)