頁面代碼:
<%@ 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微信開發中的地圖定位功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
圖片精選
