エンタープライズWeChat公式アカウントWeb開発用のAutoNaviMapAPIの紹介

test.jspページファイル

WxController.javaバックエンドロジックコード

1.JS-SDKの統合と検証

1.フロントエンドはjsファイルを導入します

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.JS-SDKの構成情報を挿入します

wx.config({
			beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: configData['appId'], // 必填，企业微信的corpID
			timestamp: configData['timestamp'], // 必填，生成签名的时间戳
			nonceStr: configData['noncestr'], // 必填，生成签名的随机串
			signature: configData['signature'],// 必填，签名，见 附录-JS-SDK使用权限签名算法
			jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来，这里我们调用地理位置接口
		});

上記で構成する必要のある情報のうち、ベータ版とデバッグ版は固定値であり、残りの項目は次のように生成されます。

appId：エンタープライズWeChat管理者バックエンドエンタープライズID

タイムスタンプ、nonceStr、署名：バックグラウンドで生成されます。バックエンドコードの呼び出しロジックは、WxController-> call WxService interface（WxServiceImplは実装クラス）-> call WxDao interface（WxDaoImplは実装クラス）です。コードは次のとおりです。

コントローラ層

WxController.java

/**
	 * 微信初始化参数获取接口
	 * @param url
	 * @param req
	 * @param res
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value="/getConfigParam",produces="text/html;charset=UTF-8")
	public String getConfigParam(String url,HttpServletRequest req,HttpServletResponse res) {
		//获取access_token
		String access_token=wxService.getToken();
		//获取企业ticket
		String corpTicket=wxService.getCorpTicket(access_token);
		JSONObject jsStr = JSONObject.fromObject(corpTicket); 
		String jsapi_ticket=(String)jsStr.get("ticket");
		//随机字符串
		String noncestr=getRandomString(10);
		//时间戳
		String timestamp=String.valueOf(System.currentTimeMillis());
		//String timestamp=String.valueOf(new Date().getTime());
		//获取签名字符串
		String signature=signature(jsapi_ticket,noncestr,timestamp,url);
		//构造参数集合map
		Map<String,String> map=new HashMap<String,String>();
		map.put("appId", "ww150a183aef2050ad");
		map.put("noncestr", noncestr);
		map.put("timestamp", timestamp);
		map.put("signature", signature);
		//生成返回值
		JSONObject jo=JSONObject.fromObject(map);
		String result=jo.toString();
		return result;
	}
    //签名字符串生成函数
    public String signature(String jsapi_ticket,String noncestr,String timestamp,String url) {
		String str="jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
		//sha1加密
		String signature=getSha1(str);	
		return signature;
	}

 サービス層

WxService.javaインターフェース

public String getToken();
	
public String getCorpTicket(String access_token);

WxServiceImpl.java（WxService.javaインターフェイスを実装します）

@Override
	public String getToken() {
		String ID="##";//##为企业ID
		String SECRET="##";//##为企业微信中应用的Secret
		String param="corpid="+ID+"&corpsecret="+SECRET;
		String getTokenUrl="https://qyapi.weixin.qq.com/cgi-bin/gettoken";
		return wxDao.getToken(getTokenUrl,param);
	}

	@Override
	public String getCorpTicket(String access_token) {
		String getCorpTicketUrl="https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket";
		JSONObject jsStr = JSONObject.fromObject(access_token); 
		String tokenStr=(String)jsStr.get("access_token");
		String param="access_token="+tokenStr;
		String corpTicket=wxDao.getCorpTicket(getCorpTicketUrl, param);
		return corpTicket;
	}

Dao层

WxDao.javaインターフェース

 public String getToken(String url, String param);
    
 public String getCorpTicket(String getCorpTicketUrl,String param);

WxDaoImpl.java（WxDao.javaインターフェイスの実装）ここではデータベースストレージメソッドを使用します。sccess_tokenbaoはStaticParamテーブルに格納されます。クエリを実行するときは、最後のストレージからの距離が7200秒を超えているかどうかを確認し、有効期限が切れている場合は再リクエストしてください。取得して保存します。

/**
	 * 获得access_token
	 * 	param："corpid=ID&corpsecret=SECRET"
	 */
	@Override
	public String getToken(String getTokenUrl,String param) {
		String result="";//包含access_token的字符串
		//查找数据表staticParam,看是否已有token且未过期
		String sql="SELECT * FROM STATICPARAM where key='access_token'";
		Query query=sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(StaticParam.class);
		ArrayList<StaticParam> rt=(ArrayList<StaticParam>)query.list();
		if(rt.size()==0) {
			//未保存access_token,请求新token并写入
			String data=sendGet(getTokenUrl,param);
			StaticParam staticParam=new StaticParam();
			staticParam.setKey("access_token");
			staticParam.setValue(data);
			staticParam.setTime(new Date().getTime());
			Session session=sessionFactory.openSession();
			Transaction tx = session.beginTransaction();
			String newId=(String)session.save(staticParam);
			tx.commit();
			session.close();
			result=data;
		}else {
			//已有token,检查是否过期,当前时间戳-保存时间戳   7200s
			long interval=new Date().getTime()-rt.get(0).getTime();
			if(interval>=7200000) {
				//重新获取并写入
				String data=sendGet(getTokenUrl,param);
				StaticParam staticParam=new StaticParam();
				staticParam.setId(rt.get(0).getId());
				staticParam.setKey("access_token");
				staticParam.setValue(data);
				staticParam.setTime(new Date().getTime());
				Session session=sessionFactory.openSession();
				Transaction tx = session.beginTransaction();
				session.update(staticParam);
				tx.commit();
				session.close();
				result=data;
			}else {
			    //直接数据库中取值
				result=rt.get(0).getValue();
			}
		}
		return result;
	}
/**
	 * 获取企业ticket
	 * @param getCorpTicketUrl 请求URL：https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN
	 * @return
	 */
	public String getCorpTicket(String getCorpTicketUrl,String param) {
		String result="";//包含corpTicket的字符串
		//查找数据表staticParam,看是否已有corpTicket且未过期
		String sql="SELECT * FROM STATICPARAM where key='corpTicket'";
		Query query=sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(StaticParam.class);
		ArrayList<StaticParam> rt=(ArrayList<StaticParam>)query.list();
		if(rt.size()==0) {
			//未保存corpTicket,请求新corpTicket并写入
			String data=sendGet(getCorpTicketUrl,param);
			StaticParam staticParam=new StaticParam();
			staticParam.setKey("corpTicket");
			staticParam.setValue(data);
			staticParam.setTime(new Date().getTime());
			Session session=sessionFactory.openSession();
			Transaction tx = session.beginTransaction();
			String newId=(String)session.save(staticParam);
			tx.commit();
			session.close();
			result=data;
		}else {
			//已有corpTicket,检查是否过期,当前时间戳-保存时间戳   7200s
			long interval=new Date().getTime()-rt.get(0).getTime();
			if(interval>=7200000) {
				//重新获取并写入
				String data=sendGet(getCorpTicketUrl,param);
				StaticParam staticParam=new StaticParam();
				staticParam.setId(rt.get(0).getId());
				staticParam.setKey("corpTicket");
				staticParam.setValue(data);
				staticParam.setTime(new Date().getTime());
				Session session=sessionFactory.openSession();
				Transaction tx = session.beginTransaction();
				session.update(staticParam);
				tx.commit();
				session.close();
				result=data;
			}else {
			    //直接数据库中取值
				result=rt.get(0).getValue();
			}
		}
		return result;
	}

2. AutoNavi MapAPIの統合

test.jsp

準備：AutoNaviの舞台裏で個人開発者として登録し、[マイアプリケーション]で新しいアプリケーションを作成し、後で使用するキーを取得します。

 

 

1. Gaode mapjsを紹介します

ます。<script type = "text / javascriptの" SRC = "https://webapi.amap.com/maps?v=1.4.15&key= ＃ "> </ SCRIPT> // ＃は、準備キー値で得られたAutoNaviアプリケーションです 

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=#"></script>//#处为准备工作中获取的高德应用的Key值 

2. <head>に次のステートメントを追加します

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

3.js呼び出しの例

//初始化地图
var map = new AMap.Map('container', {
     center: [116.397428, 39.90923],
     layers: [//只显示默认图层的时候，layers可以缺省
         new AMap.TileLayer()//高德默认标准图层
     ],
     zoom: 13
});
wx.getLocation({
		    type: 'wgs84', // 默认为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; // 位置精度
		        //console.log(latitude);
		    }
		});

4.テスト用の完全なtest.jspページコードは次のとおりです。

最も完全な通話の説明は、公式 Webサイトのドキュメントによって異なります〜、公式通話の例は次のとおりですhttps://developer.amap.com/demo/javascript-api/example/layers/default

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f0c096320bf008abe63967af3f10cf1e"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<style>
#container {width:100%; height: 80%; }  
</style>
<body style="width:100%;height:300px;">
<div align="center">

<h1>地图测试页面</h1>

</div>

<div id="container">放置地图的容器</div> 
	
	
</body>
<script type="text/javascript">
var configData="";
//获取微信初始化参数
$.ajax({
	url:"#",//后端生成温馨js-sdk初始化参数的接口地址
	type:"post",
	data:{url:"#"},//test.jsp的访问路径
	dataType:'text',
	success:function(res){
		//console.log(res);
		var rt=eval('('+res+')');
		configData=rt;
		
		//console.log(configData);
		//微信初始化
		wx.config({
			beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: configData['appId'], // 必填，企业微信的corpID
			timestamp: configData['timestamp'], // 必填，生成签名的时间戳
			nonceStr: configData['noncestr'], // 必填，生成签名的随机串
			signature: configData['signature'],// 必填，签名，见 附录-JS-SDK使用权限签名算法
			jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
		});
		wx.getLocation({
		    type: 'wgs84', // 默认为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; // 位置精度
		        //console.log(latitude);
		    }
		});
	},
	error:function(){
		console.log("出错了");
	}
})
//图层参数
var layer = new AMap.TileLayer({
          zooms:[3,20],    //可见级别
          visible:true,    //是否可见
          opacity:1,       //透明度
          zIndex:0,         //叠加层级
          detectRetina:true //是否在高清屏下适配，true为是
    })

//初始化地图
var map = new AMap.Map('container', {
     center: [116.397428, 39.90923],
     layers: [//只显示默认图层的时候，layers可以缺省
         new AMap.TileLayer()//高德默认标准图层
     ],
     zoom: 13
});
//地图点标记
marker = new AMap.Marker({
    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",//可替换自己的图片地址
    position: [116.406315,39.908775],
    offset: new AMap.Pixel(-13, -30)
});
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
marker.setMap(map);
</script>
</html>

ブラウザがこのプロジェクトのtest.jspページにアクセスすると、ページにマップが表示されます（特定のアクセスパスはプロジェクトごとに異なり、独自のプロジェクトに応じて記述できます〜）