阿里云+微信小程序+GPS定位

导语:阿里云物联网板块是一个功用十分强健的板块,并且通俗易懂,十分简略上手,比华为的要略微简略上手一些。本次,小编经过阿里物联网途径,将SIM800M32的GPS经纬度坐标发送到阿里云途径,并经过规矩引擎转发数据至微信小程序,然后在地图上闪现方位。

关键词:阿里云IOT 规矩引擎 SIM800M32 微信小程序

一:移植阿里云iot-embed 嵌入式C

本次运用的途径是MTK的2503途径,模块运用的是上海芯讯通的SIM800M32模块,该模块支撑GPS功用。将阿里云的iot-embed SDK移植到该途径。移植的教程能够参看阿里的官方文档。作为个人的开发者,能够找淘宝卖家或许直接联络芯讯通客服让他们供给相关的模块以及现已结束MQTT功用的软件固件。

阿里云的官方文档网址为:https://help.aliyun.com/document_detail/42648.html?spm=a2c4g.11174283.6.568.3a8b1668589RaX
阿里云+微信小程序+GPS定位
SIM800M32的AT指令流程为:

1、注网流程:

AT+CGREG?

+CGREG: 0,1

OK

AT+COPS?

+COPS: 0,0,"CHINA MOBILE"

OK

AT+SAPBR=3,1,"Contype","GPRS"

OK

AT+SAPBR=3,1,"APN","CMNET"

OK

AT+SAPBR=1,1

OK

AT+SAPBR=2,1

+SAPBR: 1,1,"10.80.195.168"

OK

2、生成gps数据:

AT+CLBS=4,1

+CLBS: 0,106.639799,29.488946,550,XX/XX/XX,XX:XX:XX

OK

3、经过mqtt发送gps数据:

AT+IMQTTAUTH="xxx","yyy","zzz"

OK

+IMQTTAUTH:OK

AT+IMQTTCONN

OK

AT+IMQTTSUB="/XXXX/XXXXX/user/gps",0

+IMQTTSUB: 1

OK

+IMQTTSUB: 1,0

AT+IMQTTPUB="XXXX/XXXXX/user/gps",0

+IMQTTPUB: 0

OK

经过以上进程,gps数据现已成功发送到阿里云服务器上了。

二:在阿里云物联网途径创立产品和设备,并进行规矩引擎的装备

1、这儿由所以嵌入式C设备和微信小程序两个设备做通讯,所以需求创立两个产品和设备。

嵌入式设备是2G通讯设备所以通讯协议需求设置为蜂窝通讯

阿里云+微信小程序+GPS定位

微信小程序仍是用本来的产品和设备名吧,这个我之前在《微信小程序一分钟上云》中演示过。

2、创立规矩引擎:

经过创立规矩去创立从topic到topic的数据流通。

这儿我设置了两个自界说的主题,所以SELECT这儿我设置为longitude as l, latitude as t。

阿里云+微信小程序+GPS定位

阿里云+微信小程序+GPS定位

如上图所示,咱们的规矩引擎就创立成功了。

三:编写微信小程序

1、这次微信小程序需求用到百度地图组件,所以我开通了百度的SDK权限。办法如下:

在百度地图最下方找到地图翻开途径,并在开发文档中找到微信小程序JavaScript API。依据开发文档进行设置,这儿咱们运用的逆地址解析功用。

阿里云+微信小程序+GPS定位

阿里云+微信小程序+GPS定位

微信小程序相关代码如下:

代码一:联接阿里云

bindSubmit: function(e) {
// 引进包
var iot = require('../../dist/alibabacloud-iot-device-sdk.min.js');
// 界说云端创立的设备三元组信息,并运用协议声明,运用 "protocol": 'alis://'
const sdk_device = {
"productKey": this.data.key,
"deviceName": this.data.name,
"deviceSecret": this.data.secret,
"protocol": 'wxs://',
}
wx.setStorageSync('longitude', longitude);
wx.setStorageSync('latitude', latitude);
// 联接云途径
let device = iot.device(sdk_device);
// 当联接成功进入回调
device.on('connect', () => {
console.log('联接成功....');
device.subscribe('/<productKey>/<deviceName>/user/currenttemp');
wx.redirectTo({
url: '../alimqtt/alimqtt',
})
});
device.on('message', (topic, payload) => {
console.log('topic:', topic);
if (payload) {
console.log('payload', payload);
var jsonString = payload.toString();
console.log('payload.toString()', jsonString);
var jsObject = JSON.parse(jsonString);
console.log('payload.toString()', jsObject.l, jsObject.t);
longitude = jsObject.l;
latitude = jsObject.t;
wx.setStorageSync('longitude', longitude);
wx.setStorageSync('latitude', latitude);
}
});

代码二:在百度地图上定位

    var that = this;
// 新建百度地图政策
var BMap = new bmap.BMapWX({
ak: 'ekLPZDaZsGonChTnpUXkUDx56kfCjDgV'
});
var fail = function(data) {
console.log(data)
};
var success = function(data) {
wxMarkerData = data.wxMarkerData;
wxMarkerData[0].latitude = wx.getStorageSync('latitude');
wxMarkerData[0].longitude = wx.getStorageSync('longitude');
that.setData({
markers: wxMarkerData
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
// 建议regeocoding检索央求
BMap.regeocoding({
fail: fail,
success: success,
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
});
},

四:毕竟的闪现作用如下:

阿里云+微信小程序+GPS定位

这是自己实实在在做出来的,就期望和感兴趣的一同交流学习,不喜勿喷,如果有感兴趣的能够重视微信大众号——物联网人家,获取无缺的代码,谢谢

阿里云+微信小程序+GPS定位