通过湖畔云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证书 选项,跳过服务器域名的校验。
完成效果如下。