微信小程序入门5--湖畔云GPS定位信息
本帖最后由 湖畔科技 于 2020-2-25 16:17 编辑通过湖畔云GPS定位，获得经纬度信息，通过百度地图转换出相应的位置信息。
过程：
第一步：获取湖畔云GPS定位经纬度信息
第二步：获取ak及下载百度地图微信小程序JavaScript API模块
第三步：实例
第一步：
通过网络请求湖畔云GPS定位经纬度信息的链接，例如：https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82请求成功后得到经纬度信息：lng、lat。通过如下代码将经纬度信息进行提取并转换成float类型。latitude: parseFloat(res.data.value.split(',').split(':')),
longitude: parseFloat(res.data.value.split(',').split(':')),
第二步：得到经纬度信息后，将经纬度信息代入到百度地图开放平台提供的逆地理编码的API：http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194
该API有两个必须的参数：location、ak。关于ak的获取及下载百度地图微信小程序JavaScript API模块可见：https://www.nnhpbbs.com/forum.php?mod=viewthread&tid=82&fromuid=3（查看图片需注册登录）
第三步：打开快速创建的微信小程序 pages/demo/demo.js 文件，用下面的代码完全替换原代码。注意替换您的AK！！！否则可能没有效果。
var bmap = require('../../libs/bmap-wx.min.js');//引入API模块！！！
var wxMarkerData = [];
Page({
data: {
markers: [{
iconPath: '../../img/marker_red.png',
latitude: 0,
longitude: 0,
}],
latitude: 0,
longitude: 0,
address: '',
},
onLoad: function() {
var that = this;//把this对象复制到临时变量that
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: '您的AK'
});
wx.request({
url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82',
data: {},
success: function (res) {
that.setData({
latitude: parseFloat(res.data.value.split(',').split(':')),
longitude: parseFloat(res.data.value.split(',').split(':')),
'markers.latitude': res.data.value.split(',').split(':'),
'markers.longitude': res.data.value.split(',').split(':')
});
wx.request({
url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的AK&output=json&coordtype=wgs84ll&location=' + that.data.latitude + ',' + that.data.longitude,
data: {},
success: function (res) {
that.setData({
address: res.data.result.formatted_address
});
},
})
},
})
},
})打开 pages/demo/demo.wxml 文件，用下面的代码完全替换原代码。<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}"></map>
</view>
<view class="rgc_info">
<text>地址：{{address}}</text>
</view>打开 pages/demo/demo.css 文件，用下面的代码完全替换原代码。.map_container{
height: 300px;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}在微信开发者工具中，可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。
完成效果如下。
页:
[1]