java微信开发之地图定位
页面代码:
<%@ 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="stylesheet" />
<script src="<%=basePath %>js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<link href="<%=basePath %>js/master.css" 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:;">保存</a>
<a id="getlocation" href="javascript:;">地图</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微信开发之地图定位的更多相关文章
- java微信开发
所谓的微信开发就是在微信开发模式之下,对微信进行公众号和企业号的扩展开发. 如果要让你的微信公众号有更多的功能,比如菜单支持,自动的信息服务,查询,消息推送等,就必须开启微信的开发模式.进入微 ...
- 分享 Java微信开发SDK
分享 Java微信开发SDK •发布于 4周前 •作者 朋也 •432 次浏览 •最后一次编辑是 2周前 •来自 分享 给大家分享两个java开发微信公众号的sdk jfinal-weixin ...
- java微信开发API解析（二）-获取消息和回复消息
java微信开发API解析(二)-获取消息和回复消息 说明 * 本演示样例依据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/20 ...
- Java微信开发_00_资源汇总贴
1.微信公众平台技术文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432) 2.微信企业号开发接口文档(ht ...
- java微信开发API第一步 服务器接入
I如何接入服务器,下面就为大家进行介绍 一.说明 * 本示例根据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/2016 5:34 ...
- Java微信开发_Exception_01_The type org.xmlpull.v1.XmlPullParser cannot be resolved. It is indirectly referenced from required .class files
一.源码: package com.souvc.weixin.util; import java.io.InputStream; import java.io.Writer; import java. ...
- Java微信开发以及对各种云的评价
目前一个人用Java开发一个微信的会员系统,开发已经结束,现在进入测试阶段. 有一些时间看看市面上的一些Java的微信开发视频,看了一下北风网的<微信公众平台开发Java版第一季>中的1, ...
- Java微信开发_Exception_02_"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint
ip查询网址: http://www.ip.cn/ 一.异常现象 今天开始做微信开发,在办公室时能正常获取access_token,晚上回家之后获取access_token时却报出下列错误信息: {& ...
- JAVA微信开发-如何保存包含特殊字符的微信昵称
我们在做微信开发的时候,有一个很重要的就是通过openid获取用户的详细信息,包含昵称,头像,省,市,区的信息,但是现在移动时代,很多人追求个性,在名字当中大量使用火星文或者表情符.(本人实际测试过一 ...
随机推荐
- maven jdk 版本配置
一种是配置 pom.xml,一种是配置 settings.xml. 方式一:settings.xml 配置 打开 %maven%/conf/settings.xml 文件并编辑它(%maven% 表示 ...
- 基于EBNF语法的描述
基于JavaCC的语法描述 使用JavaCC从token序列中识别出"语句" “表达式” “函数调用” 等语法单位的方法. 只要为JavaCC描述“语句” “表达式” “函数调用” ...
- 微信小程序开发--富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
- Qt编写自定义控件11-设备防区按钮控件
前言 在很多项目应用中,需要根据数据动态生成对象显示在地图上,比如地图标注,同时还需要可拖动对象到指定位置显示,能有多种状态指示,安防领域一般用来表示防区或者设备,可以直接显示防区号,有多种状态颜色指 ...
- ASP.NET MVC+BUI实现表格的操作
在Web中基于表格的操作,比如添加行.单元格内容编辑等等功能,是完全基于js实现的.但如果程序员完全使用js或者jquery去编写表格控件,则会导致样式不统一,代码量较大等问题,尤其对于不太熟悉js的 ...
- J - Network of Schools
来源poj1236 A number of schools are connected to a computer network. Agreements have been developed am ...
- Struts2与spingmvc区别
1.Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上Spr ...
- 关于IOC和DI
IoC (Inverse of Control)即控制反转.是指将原来程序中自己创建实现类对象的控制权反转到IOC容器中.只需要通过IOC获了对象的实例,将IOC当成一个黑盒子.工厂.容器. spri ...
- SQLSERVER CTE表 row_number()字段 BUG
当CTE中 引用的子视图的字段用了 row_number() over等那么有可能造成row_number() 的对应关系出错的问题 所以CTE row_number() over 排序字段 必须 ...
- 手写AVL 树(上)
平衡二叉树 左旋,右旋,左右旋,右左旋 具体原理就不说了,网上教程很多.这里只实现了建树的过程,没有实现删除节点的操作. 下一篇会实现删除节点的操作. // // main.cpp // AVL // ...