本篇文章實現效果如下：
用戶點擊微信公眾號底部【校區位置】菜單，打開應用頁面，該頁面中調用微信JSSDK打開微信內置地圖，並設置目標地點(叩丁狼教育校區)，此時可看到用戶當前位置與目標地點位置的距離，還可通過右下角綠色按鈕，調用百度地圖等第三方軟件，點擊後會自動設置用戶的位置作為起點，目標地點作為終點，自動查詢方案路線。
實現步驟
一：綁定域名
在公眾號管理頁面，設置JS接口安全域名，表示該域名下的所有頁面，都擁有使用JSSDK的權限。
實現具體流程可參考該文章https://www.jianshu.com/p/85573685f17d
我使用的菜單json數據為：
{
"button": [
{
"type": "click",
"name": "課程學習",
"key": "course"
},
{
"type": "click",
"name": "就業資訊",
"key": "JAVA"
},
{
"type": "view",
"name": "校區位置",
"url": "http://huihui.mynatapp.cc/location.do"
}
]
}
三：Controller代碼
主要是根據指定的算法，生成並提供微信規定的參數給頁面。
若對微信JS-SDK不瞭解的同學可先參考該文章：https://www.jianshu.com/p/b3c4450f845e
@Controller
public class LocationController {
@RequestMapping("location")
public String location(Model model,HttpServletRequest request) throws Exception {
//32位隨機數(UUID去掉-就是32位的)
String uuid = UUID.randomUUID().toString().replace("-", "");
//jssdk權限驗證參數
TreeMap<object> map = new TreeMap<>();
map.put("appId",WeChatUtil.APPID);
long timestamp = new Date().getTime();
map.put("timestamp",timestamp);//全小寫
map.put("nonceStr",uuid);
map.put("signature",WeChatUtil.getSignature(timestamp,uuid,RequestUtil.getUrl(request)));
model.addAttribute("configMap",map);
return "location"; //視圖頁面
}
}
/<object>
參數介紹
timestamp：必填，時間戳
nonceStr：必填，隨機生成的字符串
signature：必填，根據timestamp與nonceStr與jsapi_ticket按照某種算法生成的簽名
官方文檔參考：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 （附錄1-JS-SDK使用權限簽名算法）
生成簽名的工具方法：
public static String getSignature(Long timestamp,String noncestr,String url ){
//對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）
Map<string> map = new TreeMap<>();
map.put("jsapi_ticket",getJsapi_ticket());
map.put("timestamp",timestamp);
map.put("noncestr",noncestr);
map.put("url",url);
//使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1
StringBuilder sb = new StringBuilder();
Set<string> set = map.keySet();
for (String key : set) {
sb.append(key+"="+map.get(key)).append("&");
}
//去掉最後一個&符號
String temp = sb.substring(0,sb.length()-1);
//使用sha1加密
return SecurityUtil.SHA1(temp);
}
/<string>/<string>jsapi_ticket：
生成簽名signature還需要一個叫jsapi_ticket的參數，jsapi_ticket是公眾號用於調用微信JS接口的臨時票據，可以通過基礎接口的access_token來獲取，有效期為7200秒，調用次數有限，所以在後臺也需要全局緩存jsapi_ticket。
代碼：
//獲取JSSDK的接口地址
public static final String GET_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
/**
* 獲取JSSDK的jsapi_ticket
*/
public static void getJsapi_ticket(){
//發起請求到指定的接口
String result = HttpUtil.get(GET_TICKET_URL.replace("ACCESS_TOKEN",getAccessToken()));
System.out.println(result);
}
getAccessToken是之前開發教程(四)已經實現好的，有需要的可參考https://www.jianshu.com/p/85573685f17d
三：頁面中引入JS文件
四：通過config接口注入權限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用JSSDK的相關API。
在頁面中添加這段js代碼
wx.config({
debug: false, // 開啟調試模式
appId: '${configMap.appId}', // 公眾號的唯一標識
timestamp: '${configMap.timestamp}', // 生成簽名的時間戳
nonceStr: '${configMap.nonceStr}', // 生成簽名的隨機串
signature: '${configMap.signature}',// 簽名
jsApiList: ['openLocation'] // 這裡先聲明我們要用到打開地圖的JS接口
});
參數介紹
debug：true為開啟調試模式，調用的所有api的返回值會在客戶端alert出來，若是生產環境則設置為false
jsApiList：必填，在裡面聲明我們需要使用到的JS接口權限
五：通過ready接口處理成功驗證
config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
最後添加以下js代碼即可：
wx.ready(function(){
wx.openLocation({
latitude:23.132006, // 緯度，浮點數，範圍為90 ~ -90
longitude:113.377785, // 經度，浮點數，範圍為180 ~ -180。
name: '叩丁狼教育', // 位置名
address: '專業IT培訓', // 地址詳情說明
scale: 25, // 地圖縮放級別,整形值,範圍從1~28。默認為最大
infoUrl: 'http://www.wolfcode.cn/' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉
});
});
latitude與longitude是目標地點的經緯度座標，可以使用騰訊地圖提供的座標拾取器
https://lbs.qq.com/tool/getpoint/ 搜索指定地點即可獲取。
閱讀更多 叩丁狼stef 的文章
