首页 > 新闻杂谈 > 分享:微信电子导航DEMO
2017七月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&region=合肥&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>

255 total views, 1 views today

本文地址:https://www.wizzer.cn/archives/3352 , 转载请保留.

本文目前尚无任何评论.

发表评论