小程序只支持获取当前位置的经纬度,并不能直接获取到地理名称,需要通过第三方来逆地址解析,这里我选择的是腾讯位置服务

在使用前需要去申请key,这里是地址:https://lbs.qq.com/console/mykey.html?console=mykey

下面上栗子:

  <view class="hotcity-common thisCity">当前选择城市</view>
  <view class="thisCityName">{{city}}</view>
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
page({
    data: {
    city: "",
    latitude: '',
    longitude: '',
    }

onLoad: function() {
    qqmapsdk = new QQMapWX({
      key: 'FD2BZ-R34KJ-4P4FW-KAW2S-ZASLV-GCFBR' //自己的key秘钥
    });
    this.getUserLocation();
  },

getUserLocation: function() {
    let vm = this;
    wx.getSetting({
      success: (res) => {
        console.log("设置信息"+JSON.stringify(res))
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置,请确认授权',
            success: function(res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function(dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权,调用wx.getLocation的API
                      vm.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          vm.getLocation();
        } else {
          //调用wx.getLocation的API
          vm.getLocation();
        }
      }
    })
  },

  // 微信获得经纬度
  getLocation: function() {
    let vm = this;
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        console.log(JSON.stringify(res))
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy;
        vm.getLocal(latitude, longitude)
      },
      fail: function(res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
  // 获取当前地理位置
  getLocal: function(latitude, longitude) {
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function(res) {
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        vm.setData({
          province: province,
          city: city,
          latitude: latitude,
          longitude: longitude
        })

      }
    });
  },

})

以上就是小程序获取地理位置的全部方法

微信小程序获取地理位置的更多相关文章

  1. 微信小程序获取地理位置授权

    微信小程序获取地理位置授权,首先需要在app.json中添加配置: "permission": { "scope.userLocation": { " ...

  2. 微信小程序-获取地理位置

    近期公司使用微信小程序开发一套应用,涉及到使用小程序的获取地理位置接口,但是在使用测试过程中发现获取的经纬度偏差较大, 之后进行了一番搜索,终于找到了, 原文地址:http://blog.csdn.n ...

  3. 微信小程序 获取地理位置信息

    app.json "permission":{ "scope.userLocation": { "desc": "你的位置信息将用 ...

  4. 微信小程序-获取当前城市位置及再次授权地理位置

    微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...

  5. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  6. 微信小程序-获取当前位置和城市名

    微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...

  7. 微信小程序-获取经纬度

    微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...

  8. 微信小程序获取Access_token和页面URL生成小程序码或二维码

    1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...

  9. C# 微信小程序获取openid sessionkey

    项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...

随机推荐

  1. docker-compose 报错记录

    1.如往常一样对docker-compose.yml配置修改后,docker-compose up -d 后台启动,启动后报错,由原来的done变成了error. 第一反应就是down掉这些容器: d ...

  2. Python生成随机不重复姓名昵称

    姓采用百家姓,名字从常用名字高频字选取两个汉字,再和当前时间戳组合,估计应该是不会重复了,代码如下: # -*- coding:utf-8 -*- import random import time ...

  3. 1.Linux标准IO编程

    1.1Linux系统调用和用户编程接口 1.1.1系统调用 用户程序向操作系统提出请求的接口.不同的系统提供的系统调用接口各不相同. 继承UNIX系统调用中最基本和最有用的部分. 调用按照功能分:进程 ...

  4. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  5. 【Codeforces 300C】Beautiful Numbers

    [链接] 我是链接,点我呀:) [题意] 让你找到长度为n的数字 这个数字只由a或者b组成 且这n个数码的和也是由a或者b组成的 求出满足这样要求的数字的个数 [题解] 枚举答案数字中b的个数为y,那 ...

  6. ssc项目Python爬虫心得

    ###今日心得 ####time.datetime 1.字符串格式到标准化格式:time.strptime(str, "%Y%m%d") 2.今天的标准化格式:today = da ...

  7. idea结合git版本控制

    IntelliJ-IDEA和Git.GitHub.Gitlab的使用(五)----https://blog.csdn.net/milsevol/article/details/72792468

  8. Leetcode 80.删除重复数组的重复项

    删除重复数组的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间 ...

  9. HDU 1234 简单模拟题

    题目很简单不多说了,我只是觉得这题目的输入方式还是很有特点的 #include <cstdio> #include <cstring> #include <algorit ...

  10. jquery动态为个span,input,div,等标签赋值的方法总结,js动态隐藏div

    1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...