微信小程序API——获取定位 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序API——获取定位

发表时间:2020-9-25

发布人:葵宇科技

浏览次数:83

第 1 步:获取经纬度

wx.getLocation(Object object)

调用前需要 用户授权 scope.userLocation

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。

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

第 2 步:获取高德Key

第 3 步:下载并安装微信小程序SDK

从相关下载页面下载开发包并解压。

解压后得到 amap-wx.js 文件,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,完成安装。

第 4 步:设置安全通讯域名

为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。

登录微信公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:

第 5 步:

接下来我们需要在页面的js文件中配置我们需要操作的数据

const amapFile = require('../../libs/amap-wx.js');
const markersData = {
  latitude: '', //纬度
  longitude: '', //经度
  key: "需要去高德地图注册成为开发者,然后就会获得一个key" //申请的高德地图key
};

好了,我们配置好外部文件以后,就可以在js里面写逻辑了,下面贴出我的js代码。

//index.js
//获取应用实例
const app = getApp();
const util = require('../../utils/util.js');
const amapFile = require('../../libs/amap-wx.js');
const markersData = {
  latitude: '', //纬度
  longitude: '', //经度
  key: "需要去高德地图注册成为开发者,然后就会获得一个key" //申请的高德地图key
};
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    countries: ["小型汽车", "大型汽车", "挂车", "大型新能源汽车", "小型型新能源汽车", "其他号牌"],
    countryIndex: 0,
    nowTime: '',
    adress: ''
  },
  //事件处理函数
  takePictures: function (options) {
    // wx.showActionSheet({
    //   itemList: ['从手机相册选择', '拍照'],
    //   success: function(res) {
    //     console.log(res.tapIndex)
    //   },
    //   fail: function(res) {
    //     console.log(res.errMsg)
    //   }
    // })
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        self.setData({
          tempfilepath: tempFilePaths[0]
        }) //tempFilePaths为一个数组,显示数组第一个元素
        //setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
      }
    })
  },
  bindCountryChange: function (e) {
    console.log('picker country 发生选择改变,携带值为', e.detail.value);
    this.setData({
      countryIndex: e.detail.value
    })
  },
  getAdress: function () {
    let that = this;
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        let latitude = res.latitude //维度
        let longitude = res.longitude //经度
        // console.log(res);
        that.loadCity(latitude, longitude);
      }
    })
  },
  //把当前位置的经纬度传给高德地图,调用高德API获取当前地理位置,天气情况等信息
  loadCity: function (latitude, longitude) {
    let that = this;
    let myAmapFun = new amapFile.AMapWX({
      key: markersData.key
    });
    myAmapFun.getRegeo({
      location: '' + longitude + ',' + latitude + '', //location的格式为'经度,纬度'
      success: function (data) {
        // console.log(data);
        console.log(data[0].desc);
        that.setData({
          adress: data[0].desc
        })
      },
      fail: function (info) {}
    });

    // myAmapFun.getWeather({
    //   success: function (data) {
    //     that.setData({
    //       weather: data
    //     })
    //     console.log(data);
    //     //成功回调
    //   },
    //   fail: function (info) {
    //     //失败回调
    //     console.log(info)
    //   }
    // })
  },
  adressChange:function (e) {
    this.setData({
      adress: e.detail.value
    })
  },


  height="334" src="https://img-blog.csdnimg.cn/20200925162016365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjU4MjUy,size_16,color_FFFFFF,t_70" width="1200" />