微信小程序制作-随笔2

小程序获取定位信息：

主要采用小程序自带获取经纬度方法与高德api接口结合

步骤：1.注册高德地图开发者，获取key，从高德里下载微信小程序SDK，导入到项目中。（sdk下载：https://lbs.amap.com/api/wx/download）

　　　　2.将需要的配置文件和引入sdk语句写入页面js的开头

var amapFile = require('导入的sdk文件位置');//注意引入路径
var markersData = {latitude: '',//纬度longitude: '',//经度key: "高德地图key"//申请的高德地图key
};

　　　　3.写微信自带的获取经纬度方法，通过这个方法取到经纬度后传值给调用高德接口的函数。

  loadInfo: function(){var that=this;wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {var latitude = res.latitude//维度var longitude = res.longitude//经度
        console.log(res);that.loadCity(latitude,longitude);}})},

　　　　4.调用sdk接口的函数，写入页面js中。

loadCity: function (latitude, longitude){var that=this;var myAmapFun = new amapFile.AMapWX({ key: markersData.key });myAmapFun.getRegeo({location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'success: function (data) {console.log(data);},fail: function (info) { }});myAmapFun.getWeather({success: function (data) {that.setData({weather: data})console.log(data);//成功回调
      },fail: function (info) {//失败回调
        console.log(info)}})},

　　　　5.调用，在onLoad函数中调用这两个方法即可看到输出数据和给前台传值。

  onLoad: function (options) {this.loadInfo();this.loadCity();},

　　　　6.取值，前台取值通过weather.***来取值。

{{weather.city.data}}//城市信息
{{weather.weather.data}}
{{weather.winddirection.data}}
{{weather.windpower.data}}
{{weather.temperature.data}}//具体的自己查看输出内容

注意：此处调用后这些函数后运行可能会报request:fail url not in domain list的错，是因为url不合法或其他域名不合法原因，此时去右上角详情里把不校验合法性勾上即可。

转载于:https://www.cnblogs.com/hjjjjhd/p/10341567.html

微信小程序制作-随笔2相关推荐

微信小程序制作-随笔4
swiper组件应用:制作导航栏 wxml代码: <view class="movie-container"><view cl ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序开发难？资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法一.登录微信公众平台就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...

微信小程序制作-随笔2

微信小程序制作-随笔2相关推荐

最新文章

热门文章