写一个微信小程序代码要求从onenet云平台获取经纬度并调用高德地图API显示
时间: 2023-06-10 13:06:44 浏览: 162
以下一个简单的微信小程序代码,用于从OneNet云平台获取设备上传的经纬度数据,并在地图上显示出来。本例中使用了高德地图API,需要先申请高德地图开发者账号并获取API Key。
1. 在wxml文件中添加map组件和一个按钮,用于触发获取位置数据的事件:
```html
<view class="container">
<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" show-location="true"></map>
<button bindtap="getLocation">获取位置</button>
</view>
```
2. 在js文件中定义获取位置数据的函数,并调用OneNet云平台API获取设备上传的位置信息:
```javascript
Page({
data: {
longitude: 116.397128,
latitude: 39.916527,
scale: 16,
markers: []
},
onLoad: function () {
var that = this;
wx.request({
url: 'https://api.heclouds.com/devices/{设备ID}/datapoints?datastream_id=longitude,latitude&limit=1',
header: {
'content-type': 'application/json',
'api-key': 'API Key'
},
success: function (res) {
console.log(res.data.data.datastreams[0].datapoints[0].value);
console.log(res.data.data.datastreams[1].datapoints[0].value);
var longitude = res.data.data.datastreams[0].datapoints[0].value;
var latitude = res.data.data.datastreams[1].datapoints[0].value;
var markers = [{
id: "1",
longitude: longitude,
latitude: latitude,
title: '设备位置'
}];
that.setData({
longitude: longitude,
latitude: latitude,
markers: markers
});
}
})
},
getLocation: function () {
var that = this;
wx.getLocation({
success: function (res) {
console.log(res.latitude);
console.log(res.longitude);
var markers = [{
id: "1",
longitude: res.longitude,
latitude: res.latitude,
title: '当前位置'
}];
that.setData({
longitude: res.longitude,
latitude: res.latitude,
markers: markers
});
},
})
}
})
```
3. 在app.json文件中添加高德地图API Key:
```json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"amap": {
"apiKey": "API Key"
}
}
```
4. 在app.js文件中引入高德地图API:
```javascript
App({
onLaunch: function () {
var amap = require('./libs/amap-wx.js');
this.globalData.amap = new amap.AMapWX({
key: 'API Key'
});
},
globalData: {
userInfo: null,
amap: null
}
})
```
5. 在wxml文件中引入高德地图API:
```html
<!-- 引入高德地图API -->
<script src="../../libs/amap-wx.js"></script>
```
这样就完成了从OneNet云平台获取位置数据并在地图上显示的功能。
阅读全文