页面代码:
|
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