java开发地图特色功能_java微信开发中的地图定位功能

页面代码:

pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

填写基本信息

物品名称

拍照或从手机相册中选择图片

选择图片

上传图片

已上传图片

物品描述

经度

纬度

地址

海拔

保存

地图

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('

');

}

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('

');

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: '' // 在查看位置界面底部显示的超链接,可点击跳转

});

})

总结

以上所述是小编给大家介绍的java微信开发中的地图定位功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！