微信 php 地图定位,微信公众号定位地图位置写入数据库，再显示地图的方法
有一個(gè)表單，需要在填報(bào)過程中獲取地理位置。定位方式有三種：H5，百度，公眾號(hào)。因大家習(xí)慣了微信操作，最終選擇通過微信公眾號(hào)接口獲取位置數(shù)據(jù)并寫入數(shù)據(jù)庫，再調(diào)用騰訊地圖展示。
開發(fā)架構(gòu)是laravel6.4 ，前端html代碼：
{{$val}} 顯示地圖 重新定位前端js代碼：//點(diǎn)擊地圖定位按鈕
$(".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();?//定義一數(shù)組
strs?=?data.split(",");?//字符分割
var?id?=?strs[0];//待寫入id
var?bm?=?strs[1];//表名
if(window.confirm('定位需要幾秒時(shí)間，確認(rèn)定位？')){
$.ajax({
url:"/getConfig",
type:"get",
data:?{url:?location.href},
async:true,
dataType:"json",
success:function?(data){
//console.log(data);
wx.config({
debug:?false,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來
appId:?data.appid,?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp:?data.timestamp,?//?必填，生成簽名的時(shí)間戳
nonceStr:?data.nonceStr,?//?必填，生成簽名的隨機(jī)串
signature:?data.signature,//?必填，簽名，見附錄1
jsApiList:?['getLocation','openLocation']?//?填入需要使用的JS接口列表
});
wx.ready(function(){
wx.checkJsApi({
jsApiList:?['getLocation','openLocation'],
});
//config信息驗(yàn)證后會(huì)執(zhí)行ready方法對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
wx.getLocation({
type:?'gcj02',?//?默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'
success:?function?(res)?{
console.log(res);
var?weidu?=?res.latitude;?//?緯度，浮點(diǎn)數(shù)，范圍為90?~?-90
var?jingdu?=?res.longitude;?//?經(jīng)度，浮點(diǎn)數(shù)，范圍為180?~?-180。
var?sudu?=?res.speed;?//?速度，以米/每秒計(jì)
var?wzjd?=?res.accuracy;?//?位置精度
wxdwxr(weidu,jingdu,sudu,wzjd,id,bm);//傳給后端寫入數(shù)據(jù)庫
}
});
});
wx.error(function(res){
console.log(res);
//?config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});
}
});
}
}else{
alert('地圖定位需要使用微信打開！');
}
});
//將定位數(shù)據(jù)寫入
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('定位成功，進(jìn)入地圖查看位置！');
//使用微信內(nèi)置地圖查看位置接口
wx.openLocation({
latitude:?data.weidu,?//?緯度，浮點(diǎn)數(shù)，范圍為90?~?-90
longitude:?data.jingdu,?//?經(jīng)度，浮點(diǎn)數(shù)，范圍為180?~?-180。
name:?'該貧困戶位置',?//?位置名
address:?'車溪鄉(xiāng)朱坑村',?//?地址詳情說明
scale:?15,?//?地圖縮放級(jí)別,整形值,范圍從1~28。默認(rèn)為最大
infoUrl:?'https://blog.dzbfsj.com/cx'?//?在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
});
}
},
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();?//定義一數(shù)組
strs?=?data.split("_");?//字符分割
var?id?=?strs[0];
var?bm?=?strs[1];
var?dwxx?=?strs[2];//定位的json，包含經(jīng)緯度
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,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來
appId:?data.appid,?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp:?data.timestamp,?//?必填，生成簽名的時(shí)間戳
nonceStr:?data.nonceStr,?//?必填，生成簽名的隨機(jī)串
signature:?data.signature,//?必填，簽名，見附錄1
jsApiList:?['openLocation']?//?填入需要使用的JS接口列表
});
wx.ready(function(){
wx.checkJsApi({
jsApiList:?['openLocation'],
});
wx.openLocation({
latitude:?dwjx[0],?//?緯度，浮點(diǎn)數(shù)，范圍為90?~?-90
longitude:?dwjx[1],?//?經(jīng)度，浮點(diǎn)數(shù)，范圍為180?~?-180。
name:?'該貧困戶位置',?//?位置名
address:?'車溪鄉(xiāng)朱坑村',?//?地址詳情說明
scale:?15,?//?地圖縮放級(jí)別,整形值,范圍從1~28。默認(rèn)為最大
infoUrl:?'https://blog.dzbfsj.com/cx'?//?在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
});
});
wx.error(function(res){
console.log(res);
});
}
});
}else{
alert('地圖需要使用微信打開！');
}
});
后端controller PHP代碼：//地圖定位
public?function?getConfig(Request?$request)
{
//獲取參數(shù)
$url?=?$request->get('url');
//公眾號(hào)的appid、secret
$appid?=?env('WEIXIN_KEY');
$secret?=?env('WEIXIN_SECRET');
//緩存內(nèi)是否存在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;
//隨機(jī)生成16位字符
$noncestr?=?str_random(16);
//時(shí)間戳
$time?=?time();
//拼接string1
$jsapiTicketNew?=?"jsapi_ticket=$jsapiTicket&noncestr=$noncestr×tamp=$time&url=$url";
//對(duì)string1作sha1加密
$signature?=?sha1($jsapiTicketNew);
//存入數(shù)據(jù)
$data?=?[
'appid'?=>?$appid,
'timestamp'?=>?$time,
'nonceStr'?=>?$noncestr,
'signature'?=>?$signature,
'jsapiTicket'?=>?$jsapiTicket,
'url'?=>?$url,
'jsApiList'?=>?'getLocation'
];
return?json_encode($data);
}
//定位數(shù)據(jù)寫入數(shù)據(jù)庫
public?function?wxdwxr(Request?$request)
{
//獲取參數(shù)weidu,jingdu,sudu,wzjd,id,bm
$weidu?=?$request->weidu;//緯度
$jingdu?=?$request->jingdu;//經(jīng)度
//$sudu?=?$request->sudu;//速度
//$wzjd?=?$request->wzjd;//位置精度
$wzsz?=?array($weidu,$jingdu);//位置數(shù)組
$wzjson?=?json_encode($wzsz);//轉(zhuǎn)json字符串
$id?=?$request->id;
$bm?=?$request->bm;
$xrjg?=?DB::table($bm)->where('id',?$id)->update(['地圖位置'?=>?$wzjson]);//更新數(shù)據(jù)庫
$cxmz?=?array('status'?=>?'200','weidu'?=>?$weidu,'jingdu'?=>?$jingdu);
echo?json_encode($cxmz,JSON_UNESCAPED_UNICODE);
}
教程完畢，系統(tǒng)使用正常。
總結(jié)
以上是生活随笔為你收集整理的微信 php 地图定位,微信公众号定位地图位置写入数据库，再显示地图的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 优秀码农选择对象详细指南，看完记得要实战
- 下一篇： php实现pdhf2加密,搞了一天半了，