20177 月4
分享：微信电子导航DEMO
后台JAVA代码：
package cn.wizzer.app.web.modules.controllers.front.wx;
import cn.wizzer.app.web.commons.base.Globals;
import cn.wizzer.app.wx.modules.services.WxAddressService;
import cn.wizzer.app.wx.modules.services.WxConfigService;
import org.nutz.dao.Cnd;
import org.nutz.ioc.loader.annotation.Inject;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.json.Json;
import org.nutz.lang.Lang;
import org.nutz.lang.Strings;
import org.nutz.lang.util.NutMap;
import org.nutz.log.Log;
import org.nutz.log.Logs;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.weixin.at.impl.MemoryJsapiTicketStore;
import org.nutz.weixin.spi.WxApi2;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
/**
* Created by wizzer on 2017/6/27.
*/
@IocBean
@At("/public/wx/add")
public class AddController {
private static final Log log = Logs.get();
@Inject
private WxConfigService wxConfigService;
@Inject
private WxAddressService wxAddressService;
@At("/index/?")
@Ok("beetl:/public/add/index.html")
public void index(String wxid,HttpServletRequest req, HttpSession session) {
WxApi2 wxApi2 = wxConfigService.getWxApi2(wxid);
if (Lang.isEmpty(Globals.memoryJsapiTicketStore.get(wxid))) {
Globals.memoryJsapiTicketStore.put(wxid, new MemoryJsapiTicketStore());
}
MemoryJsapiTicketStore memoryJsapiTicketStore = Globals.memoryJsapiTicketStore.get(wxid);
wxApi2.setJsapiTicketStore(memoryJsapiTicketStore);
String url = "http://" + Globals.AppDomain + Globals.AppBase + "/public/wx/add/index/"+wxid;
NutMap jsConfig = wxApi2.genJsSDKConfig(url, "getLocation");
req.setAttribute("list", wxAddressService.query(Cnd.orderBy().asc("opAt")));
req.setAttribute("jsConfig", Json.toJson(jsConfig));
}
}
前台代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子导航</title>
<link rel="stylesheet" type="text/css" href="${base!}/assets/public/wx/add/css/css.css"/>
<link rel="stylesheet" href="${base!}/assets/public/wx/add/css/zepto.mdatetimer.css">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<meta name="msapplication-tap-highlight" content="no">
<meta charset="utf-8">
<script type="text/javascript">
var base = '${base!}';
</script>
<script type="text/javascript" src="${base!}/assets/public/wx/add/js/zepto.js"></script>
<script type="text/javascript" src="${base!}/assets/public/wx/add/js/zepto.mdatetimer.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<header class="ds-head">
<h1>公司检索</h1>
</header>
<div class="time">
<div class="time-li round-a"><span>公司名称：</span><input id="name" type="text"
value=""/></div>
<div class="btn"><input id="btn" type="button" value="立即查询" class="round-a"/></div>
<div class="time-li round-a"><span>当前位置：</span><input id="longitude" type="text"
value="" readonly/><input id="latitude" type="text"
value="" readonly/></div>
</div>
<ul class="earn">
<%for(o in list){%>
<li class="earn-li">
<dl>
<dt class="cf2"><span class="earn-lil">${oLP.index}、${o.name} </span></dt>
<dd class="cf2"><span class="earn-lil">lng:${o.lng}, lat:${o.lat}</span></dd>
<dd class="cf2">
<span><button onclick="goTo('walk','${o.name}','${o.lng}','${o.lat}');">步行</button></span>
<span><button onclick="goTo('drive','${o.name}','${o.lng}','${o.lat}');">驾车</button></span>
</dd>
</dl>
</li>
<%}elsefor{%>
没有检索到结果
<%}%>
</ul>
<script language="JavaScript">
function goTo(type,name,lng,lat) {
var longitude=$("#longitude").val();
var latitude=$("#latitude").val();
window.location.href="http://apis.map.qq.com/uri/v1/routeplan?type="+type+"&from=我的位置&fromcoord="+latitude+","+longitude+"&to="+name+"&tocoord="+lat+","+lng+"&policy=1&referer=电子导航";
//window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+latitude+","+longitude+"|name:我的位置&destination=latlng:"+lat+","+lng+"|name:"+name+"&mode=driving®ion=合肥&output=html&src=电子导航";
}
wx.config(${jsConfig});
wx.ready(function(){
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
$("#latitude").val(latitude);
$("#longitude").val(longitude);
}
});
});
</script>
</body>
</html>
本文地址：https://wizzer.cn/archives/3352 , 转载请保留.