微信小程序入门5--湖畔云GPS定位信息

湖畔科技

通过湖畔云GPS定位，获得经纬度信息，通过百度地图转换出相应的位置信息。
过程：
第一步：获取湖畔云GPS定位经纬度信息
第二步：获取ak及下载百度地图微信小程序JavaScript API模块
第三步：实例

第一步：

通过网络请求湖畔云GPS定位经纬度信息的链接，例如：https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82

请求成功后得到经纬度信息：lng、lat。通过如下代码将经纬度信息进行提取并转换成float类型。

1. latitude: parseFloat(res.data.value.split(',')[0].split(':')[1]),
   
2. longitude: parseFloat(res.data.value.split(',')[1].split(':')[1]),
   

复制代码

第二步：

得到经纬度信息后，将经纬度信息代入到百度地图开放平台提供的逆地理编码的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！！！否则可能没有效果。

1. var bmap = require('../../libs/bmap-wx.min.js');  //引入API模块！！！
   
2. var wxMarkerData = [];
   
3. Page({
   
4.   data: {
   
5.     markers: [{
   
6.       iconPath: '../../img/marker_red.png',
   
7.       latitude: 0,
   
8.       longitude: 0,
   
9.     }],
   
10.     latitude: 0,
    
11.     longitude: 0,
    
12.     address: '',
    
13.   },
    
14.   onLoad: function() {
    
15.     var that = this;  //把this对象复制到临时变量that
    
16.     // 新建百度地图对象
    
17.     var BMap = new bmap.BMapWX({
    
18.       ak: '您的AK'
    
19.     });
    
20. 
    
21.    wx.request({
    
22.       url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82',
    
23.       data: {},
    
24.       success: function (res) {
    
25.         that.setData({
    
26.           latitude: parseFloat(res.data.value.split(',')[0].split(':')[1]),
    
27.           longitude: parseFloat(res.data.value.split(',')[1].split(':')[1]),
    
28.           'markers[0].latitude': res.data.value.split(',')[0].split(':')[1],
    
29.           'markers[0].longitude': res.data.value.split(',')[1].split(':')[1]
    
30.           });
    
31. 
    
32.         wx.request({
    
33.           url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的AK&output=json&coordtype=wgs84ll&location=' + that.data.latitude + ',' + that.data.longitude,
    
34.           data: {},
    
35.           success: function (res) {
    
36.             that.setData({
    
37.               address: res.data.result.formatted_address
    
38.             });
    
39.           },
    
40.         })
    
41. 
    
42.       },
    
43.     })            
    
44. 
    
45.   },
    
46. })

复制代码

打开 pages/demo/demo.wxml 文件，用下面的代码完全替换原代码。

1. <view class="map_container">
   
2.   <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}"></map>
   
3. </view>
   
4. <view class="rgc_info">
   
5.   <text>地址：{{address}}</text>
   
6. </view>

复制代码

打开 pages/demo/demo.css 文件，用下面的代码完全替换原代码。

1. .map_container{
   
2.     height: 300px;
   
3.     width: 100%;
   
4. }
   
5. 
   
6. .map {
   
7.     height: 100%;
   
8.     width: 100%;
   
9. }

复制代码

在微信开发者工具中，可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。

完成效果如下。