java微信開發(fā)中的地圖定位功能
更新時(shí)間：2018年07月25日 09:49:26 作者：有猿人
本文通過實(shí)例代碼給大家介紹了java微信開發(fā)中的地圖定位功能,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
頁面代碼:
<%@ 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">拍照或從手機(jī)相冊(cè)中選擇圖片</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">經(jīng)度</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, //用于產(chǎn)生全局圖片id，綁定已選擇圖片和已上傳圖片
selectIds: {}, //保存已經(jīng)選擇的圖片id
uploadIds:{} //保存已經(jīng)上傳到微信服務(wù)器的圖片
};
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: '${appid}', // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫企業(yè)號(hào)corpid
timestamp: '${timestamp}', // 必填，生成簽名的時(shí)間戳
nonceStr: '${nonceStr}', // 必填，生成簽名的隨機(jī)串
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', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'
success: function (res) {
lat = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
lng = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
var speed = res.speed; // 速度，以米/每秒計(jì)
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，綁定微信選擇圖片產(chǎn)生的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 + ' 張圖片');
}
});
});
//上傳圖片(保存到j(luò)s)
$("#uploadImage").on("click", function () {
if (Object.keys(images.selectIds).length == 0) {
alert('請(qǐng)先選擇圖片');
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]], //根據(jù)全局圖片id獲取已選擇圖片
isShowProgressTips: 0, // 默認(rèn)為1，顯示進(jìn)度提示
success: function (res) {
//上傳成功，images.selectIds中移除，images.uploadIds追加
//圖片從已選擇移到已上傳區(qū)域
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('請(qǐng)先上傳圖片');
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);
}
});
});
//點(diǎn)擊復(fù)選按鈕,刪除.
$("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, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
longitude:lng, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
name: $("#dizhi").val(), // 位置名
address: '當(dāng)前位置', // 地址詳情說明
scale: 16, // 地圖縮放級(jí)別,整形值,范圍從1~28。默認(rèn)為最大
infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
});
})
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的java微信開發(fā)中的地圖定位功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
SpringMVC + servlet3.0 文件上傳的配置和實(shí)現(xiàn)代碼
本篇文章主要介紹了SpringMVC + servlet3.0 文件上傳的配置和實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
Spring Security驗(yàn)證流程剖析及自定義驗(yàn)證方法
Spring Security是一個(gè)能夠?yàn)榛赟pring的企業(yè)應(yīng)用系統(tǒng)提供聲明式的安全訪問控制解決方案的安全框架。這篇文章主要介紹了Spring Security驗(yàn)證流程剖析及自定義驗(yàn)證方法,需要的朋友可以參考下2018-03-03
JAVA HTTP反向代理實(shí)現(xiàn)過程詳解
這篇文章主要介紹了JAVA HTTP反向代理實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
SpringMVC 域?qū)ο蠊蚕頂?shù)據(jù)的實(shí)現(xiàn)示例
本文主要介紹了SpringMVC 域?qū)ο蠊蚕頂?shù)據(jù)的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Java 爬蟲服務(wù)器被屏蔽的解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
Sax解析xml_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Sax解析xml，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Spring Boot從Controller層進(jìn)行單元測(cè)試的實(shí)現(xiàn)
這篇文章主要介紹了Spring Boot從Controller層進(jìn)行單元測(cè)試的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了MyBatis緩存功能原理及實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
Java通過索引值實(shí)現(xiàn)約瑟夫環(huán)算法
這篇文章主要介紹了Java通過索引值實(shí)現(xiàn)約瑟夫環(huán)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Javaweb監(jiān)聽器實(shí)例之統(tǒng)計(jì)在線人數(shù)
這篇文章主要為大家詳細(xì)介紹了Javaweb監(jiān)聽器實(shí)例之統(tǒng)計(jì)在線人數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11