zoukankan      html  css  js  c++  java
  • 微信小程序制作-随笔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不合法或其他域名不合法原因,此时去右上角详情里把不校验合法性勾上即可。

  • 相关阅读:
    从淘宝数据结构来看电子商务中商品属性设计
    YY淘宝商品数据库设计
    ElasticSearch-聚合bucket学习
    ElasticSearch-聚合bucket
    Elasticsearch(9) --- 聚合查询(Bucket聚合)
    Elasticsearch-多字段搜索(Multifield Search)和提高精确度
    五、设备管理与文件系统
    六、YUM仓库
    四、查找命令
    二、用户权限
  • 原文地址:https://www.cnblogs.com/hjjjjhd/p/10341567.html
Copyright © 2011-2022 走看看