页面代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 |
<%@ page language= "java" contenttype= "text/html; charset=utf-8" pageencoding= "utf-8" %> <% string path = request.getcontextpath(); string basepath = request.getscheme()+ "://" +request.getservername()+ ":" +request.getserverport()+path+ "/" ; %> <!doctype html> <html> <head> <meta charset= "utf-8" > <meta name= "viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>填写基本信息</title> <link href= "<%=basepath %>js/common.css" rel= "external nofollow" rel= "stylesheet" /> <script src= "<%=basepath %>js/jquery-2.1.0.js" type= "text/javascript" charset= "utf-8" ></script> <link href= "<%=basepath %>js/master.css" rel= "external nofollow" rel= "stylesheet" /> </head> <body style= "background: #f5f5f5;" > <section> <div class = "content-detail" > <div class = "detail mt20" > <div class = "detail-div" ><span class = "name" >物品名称</span><span class = "shuru" ><input type= "text" id= "wpmc" ></span></div> <div class = "wxapi_container" > <div class = "lbox_close wxapi_form" > <!-- <div style= "clear:both" ></div> <!-- <div style= "clear:both" ></div> --> <span class = "desc" >拍照或从手机相册中选择图片</span> <button class = "btn btn_primary" id= "chooseimage" >选择图片</button> <!-- <h3 id= "menu-image" >已选择图片</h3> --> <div id= "imgs" ></div> <button class = "btn btn_primary" id= "uploadimage" >上传图片</button> <h3 id= "upload-image" >已上传图片</h3> <div id= "uploadimgs" ></div> <!-- <button class = "btn btn_primary" id= "postdata" >提交</button> --> </div> </div> <div class = "detail-div detail-div-ha" ><span class = "name" >物品描述</span><span class = "shuru" ><textarea id= "wpms" rows= "6" cols= "" ></textarea></span></div> <div class = "detail-div" ><span class = "name" >经度</span><span class = "shuru" ><input id= "jingdu" type= "text" ></span></div> <div class = "detail-div" ><span class = "name" >纬度</span><span class = "shuru" ><input id= "weidu" type= "text" ></span></div> <div class = "detail-div" ><span class = "name" >地址</span><span class = "shuru" ><input id= "dizhi" type= "text" ></span></div> <div class = "detail-div" ><span class = "name" >海拔</span><span class = "shuru" ><input id= "haiba" type= "text" ></span></div> </div> <div class = "detail-btn" > <a class = "save" id= "postdata" href= "javascript:;" rel= "external nofollow" rel= "external nofollow" >保存</a> <a id= "getlocation" href= "javascript:;" rel= "external nofollow" rel= "external nofollow" >地图</a> </div> </div> </section> <div id= "map" style= "height:200px;left:" class = "content-detail" ></div> <div id= "map1" style= "height:200px;left:" class = "content-detail" ></div> </body> <script charset= "utf-8" src= "http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script> <script src= "http://ditu.google.cn/maps/api/js?key=aizasydcgsuqz920n7v2lapvs-th9qmhkahktyo&language=zh-cn" ></script> <script type= "text/javascript" > var images = { index: 1 , //用于产生全局图片id，绑定已选择图片和已上传图片 selectids: {}, //保存已经选择的图片id uploadids:{} //保存已经上传到微信服务器的图片 }; wx.config({ debug: false , // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appid: '${appid}' , // 必填，企业号的唯一标识，此处填写企业号corpid timestamp: '${timestamp}' , // 必填，生成签名的时间戳 noncestr: '${noncestr}' , // 必填，生成签名的随机串 signature: '${signature}' , // 必填，签名，见附录1 jsapilist: [ 'getlocation' , 'openlocation' , 'chooseimage' , 'uploadimage' , 'downloadimage' ] // 必填，需要使用的js接口列表，所有js接口列表见附录2 }); function i(i, a) { var t = 52.35987755982988 , e = a, n = i, o = math.sqrt(e * e + n * n) + 2e- 5 * math.sin(n * t), l = math.atan2(n, e) + 3e- 6 * math.cos(e * t), d = o * math.cos(l) + . 0065 , s = o * math.sin(l) + . 006 ; return { longitude: d, latitude: s } } var lat; var lng; wx.ready(function () { wx.getlocation({ type: 'gcj02' , // 默认为wgs84的gps坐标，如果要返回直接给openlocation用的火星坐标，可传入'gcj02' success: function (res) { lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90 lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。 var speed = res.speed; // 速度，以米/每秒计 var accuracy = res.accuracy; // 位置精度 var e = i(lng,lat); //alert(e.longitude + ',' + e.latitude); $( "#jingdu" ).val(lng); $( "#weidu" ).val(lat); //goole api 获得海拔 var elevator = new google.maps.elevationservice; var latlng = { "lat" :lat, "lng" :lng}; elevator.getelevationforlocations({ 'locations' : [latlng] }, function(results, status) { if (status === 'ok' ) { if (results[ 0 ]) { $( "#haiba" ).val(results[ 0 ].elevation+ "米" ); } else { } } else { } }); var mjkd_latlng = e.longitude + ',' + e.latitude; var url = 'http://api.map.baidu.com/geocoder/v2/?ak=6yaoynmtpnltba8z1x4lfwge&location=' + mjkd_latlng + '&output=json&pois=1' ; $.get(url, function(data) { if (data.status === 0 ) { //alert(data.result.formatted_address + '=>' + data.result.sematic_description); $( "#dizhi" ).val(data.result.sematic_description); } }, 'jsonp' ); } }); // 图片接口 // 拍照、本地选图 $( "#chooseimage" ).on( "click" , function () { wx.chooseimage({ success: function (res) { for (var i = 0 ; i < res.localids.length; i++) { //全局图片id，绑定微信选择图片产生的localid，将用户选择图片追加到已选择图片 var id = '' + images.index++; images.selectids[id] = res.localids[i]; $( '#imgs' ).append( '<div class="imgdiv"><div class="box"><input id="' + id + '" type="checkbox"/><img style="width:200px;height:200px" src="' + res.localids[i] + '" /></div></div>' ); } console.log( '已选择了 ' + object.keys(images.selectids).length + ' 张图片' ); } }); }); //上传图片(保存到js) $( "#uploadimage" ).on( "click" , function () { if (object.keys(images.selectids).length == 0 ) { alert( '请先选择图片' ); return ; } var i = 0 , length = object.keys(images.selectids).length; var selectids = []; //需要上传的图片的全局图片id for (var id in images.selectids){ selectids.push(id); } function upload() { wx.uploadimage({ localid: images.selectids[selectids[i]], //根据全局图片id获取已选择图片 isshowprogresstips: 0 , // 默认为1，显示进度提示 success: function (res) { //上传成功，images.selectids中移除，images.uploadids追加 //图片从已选择移到已上传区域 var selectid = selectids[i]; localid = images.selectids[selectid]; removeid(selectid); $( '#uploadimgs' ).append( '<div class="imgdiv"><div class="box"><input id="' + selectid + '" type="checkbox"/><img style="width:200px;height:200px" src="' + localid + '" /></div></div>' ); images.uploadids[selectid] = res.serverid i++; if (i < length) { console.log( '已上传成功 ' + i + '/' + length); upload(); } else { alert( '图片上传完毕, 已上传成功 ' + i + '/' + length); } }, fail: function (res) { alert( '上传失败 ' + i + '/' + length); } }); } upload(); }); }); //保存 $( '#postdata' ).click(function () { var wpmc = $( "#wpmc" ).val(); var wpms = $( "#wpms" ).val(); var jingdu = $( "#jingdu" ).val(); var weidu = $( "#weidu" ).val(); var dizhi = $( "#dizhi" ).val(); if (object.keys(images.uploadids).length == 0 ) { alert( '请先上传图片' ); return false ; } var serverids = []; var serverid; for (var id in images.uploadids){ serverids.push(images.uploadids[id]); } var data = { 'imgids' : serverids } $.ajax({ type: "post" , async: false , url: '/uploadimgdata' , data: { "data" : json.stringify(data), "wpmc" :wpmc , "wpms" :wpms , "jd" :jingdu, "wd" : weidu, "dz" :dizhi}, datatype: "text" , success: function (data) { if (data == "success" ) { alert( '保存成功！' ); location.reload(); } else { alert( '保存失败' ); } }, error: function (e) { alert( 11 ); } }); }); //点击复选按钮,删除. $( "body" ).on( 'click' , ':checkbox' , function(){ var id = $( this ).attr( 'id' ); removeid(id); }); function removeid(id){ if (id in images.selectids){ delete images.selectids[id] } else { delete images.uploadids[id] } $( '#' + id).parent().parent().remove(); }
//获取地图 $( "#getlocation" ).click(function(){ wx.openlocation({ latitude: lat, // 纬度，浮点数，范围为90 ~ -90 longitude:lng, // 经度，浮点数，范围为180 ~ -180。 name: $( "#dizhi" ).val(), // 位置名 address: '当前位置' , // 地址详情说明 scale: 16 , // 地图缩放级别,整形值,范围从1~28。默认为最大 infourl: '' // 在查看位置界面底部显示的超链接,可点击跳转 }); }) </script> </html> |
总结
以上所述是小编给大家介绍的java微信开发中的地图定位功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
原文链接：https://www.cnblogs.com/sqy-yyr/archive/2018/07/25/9364046.html
查看更多关于java微信开发中的地图定位功能的详细内容...