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

通过湖畔云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(',')[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。

关于ak的获取及下载百度地图微信小程序JavaScript API模块可见：微信小程序入门2的文章。

第三步：

打开快速创建的微信小程序 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(',')[0].split(':')[1]),          longitude: parseFloat(res.data.value.split(',')[1].split(':')[1]),          'markers[0].latitude': res.data.value.split(',')[0].split(':')[1],          'markers[0].longitude': res.data.value.split(',')[1].split(':')[1]          });        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证书 选项，跳过服务器域名的校验。

完成效果如下。