微信 php 地图定位,微信公众号定位地图位置写入数据库，再显示地图的方法
有一個表單，需要在填報過程中獲取地理位置。定位方式有三種：H5，百度，公眾號。因大家習慣了微信操作，最終選擇通過微信公眾號接口獲取位置數據并寫入數據庫，再調用騰訊地圖展示。
開發架構是laravel6.4 ，前端html代碼：
{{$val}} 顯示地圖 重新定位前端js代碼：//點擊地圖定位按鈕
$(".dtdw").click(function(){
//判斷是否微信中打開
var?is_weixin?=?(function(){return?navigator.userAgent.toLowerCase().indexOf('micromessenger')?!==?-1})();
if(is_weixin){
var?data?=?$(this).attr('id');
var?strs?=?new?Array();?//定義一數組
strs?=?data.split(",");?//字符分割
var?id?=?strs[0];//待寫入id
var?bm?=?strs[1];//表名
if(window.confirm('定位需要幾秒時間，確認定位？')){
$.ajax({
url:"/getConfig",
type:"get",
data:?{url:?location.href},
async:true,
dataType:"json",
success:function?(data){
//console.log(data);
wx.config({
debug:?false,?//?開啟調試模式,調用的所有api的返回值會在客戶端alert出來
appId:?data.appid,?//?必填，公眾號的唯一標識
timestamp:?data.timestamp,?//?必填，生成簽名的時間戳
nonceStr:?data.nonceStr,?//?必填，生成簽名的隨機串
signature:?data.signature,//?必填，簽名，見附錄1
jsApiList:?['getLocation','openLocation']?//?填入需要使用的JS接口列表
});
wx.ready(function(){
wx.checkJsApi({
jsApiList:?['getLocation','openLocation'],
});
//config信息驗證后會執行ready方法對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
wx.getLocation({
type:?'gcj02',?//?默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02'
success:?function?(res)?{
console.log(res);
var?weidu?=?res.latitude;?//?緯度，浮點數，范圍為90?~?-90
var?jingdu?=?res.longitude;?//?經度，浮點數，范圍為180?~?-180。
var?sudu?=?res.speed;?//?速度，以米/每秒計
var?wzjd?=?res.accuracy;?//?位置精度
wxdwxr(weidu,jingdu,sudu,wzjd,id,bm);//傳給后端寫入數據庫
}
});
});
wx.error(function(res){
console.log(res);
//?config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。
});
}
});
}
}else{
alert('地圖定位需要使用微信打開！');
}
});
//將定位數據寫入
function?wxdwxr(weidu,jingdu,sudu,wzjd,id,bm){
$.ajax({
headers:?{?'X-CSRF-TOKEN':?$('meta[name="csrf-token"]').attr('content')},
url:"/wxdwxr",//微信支付接口
type:"POST",
data:{'weidu':weidu,'jingdu':jingdu,'sudu':sudu,'wzjd':wzjd,'id':id,'bm':bm},
async:true,
dataType:"json",
success:function?(data){
console.log(data);
if?(data.status?==?"200"){//成功
alert('定位成功，進入地圖查看位置！');
//使用微信內置地圖查看位置接口
wx.openLocation({
latitude:?data.weidu,?//?緯度，浮點數，范圍為90?~?-90
longitude:?data.jingdu,?//?經度，浮點數，范圍為180?~?-180。
name:?'該貧困戶位置',?//?位置名
address:?'車溪鄉朱坑村',?//?地址詳情說明
scale:?15,?//?地圖縮放級別,整形值,范圍從1~28。默認為最大
infoUrl:?'https://blog.dzbfsj.com/cx'?//?在查看位置界面底部顯示的超鏈接,可點擊跳轉
});
}
},
error:function?(error){
alert(error);
}
});
}
//顯示地圖
$(".xsdt").click(function(){
//判斷是否微信中打開
var?is_weixin?=?(function(){return?navigator.userAgent.toLowerCase().indexOf('micromessenger')?!==?-1})();
if(is_weixin){
var?data?=?$(this).attr('id');
var?strs?=?new?Array();?//定義一數組
strs?=?data.split("_");?//字符分割
var?id?=?strs[0];
var?bm?=?strs[1];
var?dwxx?=?strs[2];//定位的json，包含經緯度
var?dwjx?=?JSON.parse(dwxx);//解析json
//console.log(dwjx);
$.ajax({
url:"/getConfig",
type:"get",
data:?{url:?location.href},
async:true,
dataType:"json",
success:function?(data){
//console.log(data);
wx.config({
debug:?false,?//?開啟調試模式,調用的所有api的返回值會在客戶端alert出來
appId:?data.appid,?//?必填，公眾號的唯一標識
timestamp:?data.timestamp,?//?必填，生成簽名的時間戳
nonceStr:?data.nonceStr,?//?必填，生成簽名的隨機串
signature:?data.signature,//?必填，簽名，見附錄1
jsApiList:?['openLocation']?//?填入需要使用的JS接口列表
});
wx.ready(function(){
wx.checkJsApi({
jsApiList:?['openLocation'],
});
wx.openLocation({
latitude:?dwjx[0],?//?緯度，浮點數，范圍為90?~?-90
longitude:?dwjx[1],?//?經度，浮點數，范圍為180?~?-180。
name:?'該貧困戶位置',?//?位置名
address:?'車溪鄉朱坑村',?//?地址詳情說明
scale:?15,?//?地圖縮放級別,整形值,范圍從1~28。默認為最大
infoUrl:?'https://blog.dzbfsj.com/cx'?//?在查看位置界面底部顯示的超鏈接,可點擊跳轉
});
});
wx.error(function(res){
console.log(res);
});
}
});
}else{
alert('地圖需要使用微信打開！');
}
});
后端controller PHP代碼：//地圖定位
public?function?getConfig(Request?$request)
{
//獲取參數
$url?=?$request->get('url');
//公眾號的appid、secret
$appid?=?env('WEIXIN_KEY');
$secret?=?env('WEIXIN_SECRET');
//緩存內是否存在accessToken。
$accessToken?=?Cache::remember('accessToken11',?120,?function?()?use?($appid,?$secret)?{
//獲取access_token的請求地址
$accessTokenUrl?=?"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
//請求地址獲取access_token
$accessTokenJson?=?file_get_contents($accessTokenUrl);
$accessTokenObj?=?json_decode($accessTokenJson);
$accessToken?=?$accessTokenObj->access_token;
return?$accessToken;
});
//獲取jsapi_ticket的請求地址
$ticketUrl?=?"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$accessToken&type=jsapi";
$jsapiTicketJson?=?file_get_contents($ticketUrl);
$jsapiTicketObj?=?json_decode($jsapiTicketJson);
$jsapiTicket?=?$jsapiTicketObj->ticket;
//隨機生成16位字符
$noncestr?=?str_random(16);
//時間戳
$time?=?time();
//拼接string1
$jsapiTicketNew?=?"jsapi_ticket=$jsapiTicket&noncestr=$noncestr×tamp=$time&url=$url";
//對string1作sha1加密
$signature?=?sha1($jsapiTicketNew);
//存入數據
$data?=?[
'appid'?=>?$appid,
'timestamp'?=>?$time,
'nonceStr'?=>?$noncestr,
'signature'?=>?$signature,
'jsapiTicket'?=>?$jsapiTicket,
'url'?=>?$url,
'jsApiList'?=>?'getLocation'
];
return?json_encode($data);
}
//定位數據寫入數據庫
public?function?wxdwxr(Request?$request)
{
//獲取參數weidu,jingdu,sudu,wzjd,id,bm
$weidu?=?$request->weidu;//緯度
$jingdu?=?$request->jingdu;//經度
//$sudu?=?$request->sudu;//速度
//$wzjd?=?$request->wzjd;//位置精度
$wzsz?=?array($weidu,$jingdu);//位置數組
$wzjson?=?json_encode($wzsz);//轉json字符串
$id?=?$request->id;
$bm?=?$request->bm;
$xrjg?=?DB::table($bm)->where('id',?$id)->update(['地圖位置'?=>?$wzjson]);//更新數據庫
$cxmz?=?array('status'?=>?'200','weidu'?=>?$weidu,'jingdu'?=>?$jingdu);
echo?json_encode($cxmz,JSON_UNESCAPED_UNICODE);
}
教程完畢，系統使用正常。
總結
以上是生活随笔為你收集整理的微信 php 地图定位,微信公众号定位地图位置写入数据库，再显示地图的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 优秀码农选择对象详细指南，看完记得要实战
- 下一篇： 华为手机照片如何出现时间地点天气，教你3