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

本文内容较多，请耐心查阅。

本文分为四个部分进行介绍：
一、在百度地图开发平台申请AK
1、 注册账号
2、创建应用
3、获取密钥(AK)
二、下载API模块
三、获取湖畔云GPS定位经纬度信息
四、编写代码

一、在百度地图开发平台申请AK
1 、注册账号
搜索http://lbsyun.baidu.com/进入百度地图开放平台首页，在首页的开发文档下的微信小程序JavaScript API，进入小程序js API的开发，展开左侧的开发指南找到账号与密钥(也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入)。
进入百度开放平台官网，点击右上角“API控制台”，注册成为百度地图开发者。如果未登录百度账号，会引导登录百度账号。如果账号未注册，请根据提示填写正确的邮箱及手机号完成开发者注册流程。




2、创建应用
再次点击进入控制台，创建一个新应用。

应用名称自定义、应用类型选择微信小程序、启用服务建议全部勾选、APPID（小程序的APPID）通过微信小程序微信认证获得，完善小程序信息后，AppID已经生成，在小程序发布流程下小程序信息中，查看详情页，一直往后滑即可看到。　
完成后即可提交。



3、获取密钥(AK)
创建好应用后，即可在应用页面看到申请成功的密钥（AK）。

二、下载API模块
在百度地图开放平台下载百度地图微信小程序JavaScript API。
搜索http://lbs.baidu.com/index.php?title=wxjsapi/wxjs-download进行下载。

解压后在wxapp-jsapi-master文件夹下的src中又两个JS文件，bmap-wx.js为常规没压缩的，bmap-wx.min.js是压缩过的,由于微信小程序项目文件大小有限制，建议使用压缩的。

在项目中新建一个文件夹libs，将bmap-wx.min.js文件拷贝到libs下。

三、获取湖畔云GPS定位经纬度信息
通过网络请求湖畔云GPS定位经纬度信息的链接，例如：https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82
请求成功后得到经纬度信息：lng、lat。通过如下代码将经纬度信息进行提取并转换成float类型。
latitude: parseFloat(res.data.value.split(’,’)[0].split(’:’)[1]),
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。

四、编写代码
在编写代码之前，可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。

打开快速创建的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.	   wx.request({
21.	      url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/82',
22.	      data: {},
23.	      success: function (res) {
24.	        that.setData({ 
25.	          latitude: parseFloat(res.data.value.split(',')[0].split(':')[1]),
26.	          longitude: parseFloat(res.data.value.split(',')[1].split(':')[1]),
27.	          'markers[0].latitude': res.data.value.split(',')[0].split(':')[1],
28.	          'markers[0].longitude': res.data.value.split(',')[1].split(':')[1]
29.	          });
30.	        wx.request({
31.	          url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的AK&output=json&coordtype=wgs84ll&location=' + that.data.latitude + ',' + that.data.longitude,
32.	          data: {},
33.	          success: function (res) {
34.	            that.setData({
35.	              address: res.data.result.formatted_address
36.	            });
37.	          },
38.	        })
39.	      }, 
40.	    })            
41.	  },
42.	})

打开 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>

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

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

编写好代码后，保存。效果如下：

以上就是查询湖畔云GPS定位信息的全部步骤，感谢观看！