基于SpringMVC的图片定位显示（依赖百度地图）

核心功能讲解：

用户可以批量上传图片（带GPS信息），然后显示到页面中，并且根据图片的经纬度定位到百度地图中，展现一系列与照片相关的信息。

系统的流程图如下：

上传代码：

<!--上传控件在这里哟-->
<div id="light">
<form id="formid"  enctype="multipart/form-data">
           
           
    <input type="file" name="clientFile" multiple="true"  id="clientFiles"  class="large button pink"/><br/>
           
           
    <input type="button" value="上传文件"  class="large button pink"  οnclick="showImages()"/>
</form>
</div>

注意：

其中   multiple 必须为true   否则 无法实现多文件的选择。

点击触发JS函数：

注： 使用ajaxFileUpload必须要添加

ajaxfileupload.js

<!--引用ajaxfileupload（多文件上传）-->
<script type="text/javascript" src="${ctx}/script/common/ajaxfileupload.js"></script>

 function  showImages(){

        $.ajaxFileUpload({
            type: "post",             //使用post方法访问后台
            dataType: "json",         
            url: "${ctx}/sys/exif/uploadImg.html",    //要访问的后台地址，这里是servlet的地址
 //            data: $("#formid").serialize(),//只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
            secureuri:false,
            fileElementId:'clientFiles',      //文件选择框的id属性.即<input type="file">的id.

            success: function(data){
               //图片出来
                for(var i = 0; i < data.sizes; i++) {
                    $("#photo").append('<img style="margin: 10px; " alt="showImage"   src="' + data.list[i] + '"     width="100px"  height="100px" />');

                }

                // 拿出经纬度、时间、图片地址
                for(var i = 0;i<data.sizes;i++){
                       $(function(){
                           var Latitude  = data.GPS[i].Latitude;
                           var longitude = data.GPS[i].longitude;
                           var DateTime  = data.GPS[i].Datetime;
                           var equipment = data.GPS[i].Model;
                           var imageURL = data.list[i];
                           alert('东经：'+longitude);
                           alert('北纬：'+Latitude);
                           theLocation(longitude,Latitude,DateTime,imageURL,equipment);
                  })
                }

            },//end success method

            error: function(XMLHttpRequest, textStatus) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }//end error method

        })//end ajax
    }

说明：

可以看到在ajxaFileUpload中的第28行有一个方法theLocation，该方法传入5个参数（经度，纬度，拍摄时间，照片url，拍摄设备），后期想要更多信息往该方法添加参数即可。