小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图)

// 获取坐标

onLoad: function (options) {
    wx.getLocation({
      type: 'gcj02', //wgs84/gcj02
      gltitude: true,
      isHighAccuracy: true,
      success: function (res) {
        console.log(res);
        console.log('纬度' + res.latitude);
        console.log('经度' + res.longitude);
      },
    })
 
    console.log('111222333sss');
    let _this = this;
    let l=_this.data.latitude;
    console.log(l);
    
  },

// 获取所在城市

lodeCity: function (longitude, latitude) {
      var me = this;
      wx.request({
          url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=获得的AK&location=' + latitude + ',' + longitude + '&output=json',
          data: {},
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
              if (res && res.data) {
                console.log(res.data)
                console.log(res.data.result.addressComponent.city)
                var city = res.data.result.addressComponent.city;
                console.log('res...................');
                me.setData({
                  city: city.indexOf('市') > -1 ? city.substr(0, city.indexOf('市')) :city
                });
                console.log(city);
              }else{
                me.setData({
                  city: '获取失败'
                });
              }
          }
      })
  },

 1.2  百度地图的准备工作

    1.在使用百度地图API之前,首先要获得百度地图的密钥ak,ak由百度地图方生成;

    2.打开百度地图开放平台,导航栏处选择 “开发文档” > “微信小程序JavaScript API”,在“入门指南”处有详细介绍怎么生成密钥ak,本文不再介绍。

      参考文档:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

    3.复制生成好的ak,把ak粘贴到小程序中。其实,百度地图有提供小程序使用的地图api的压缩包,但是出于小程序发布时对大小的限制,我选择了使用链接。

      百度地图线上转换链接地址:https://api.map.baidu.com/geocoder/v2/?ak=获得的AK&location=' + latitude + ',' + longitude + '&output=json'

    4.使用小程序的账号登录微信公众平台(https://mp.weixin.qq.com/),在“设置” 中选择 “开发设置”,把百度地图api的url添加到request合法域名中。

     注意:百度地图提供的有关于小程序API的下载包,不想使用链接地址的可以使用下载包,出于小程序发布时对大小的限制,本文使用的是链接地址未使用下载包。

这个开发设置我是在“开发”--“开发管理”找到的

5.此时准备工作完成,便可以直接在小程序中根据经纬度转换出相应的地名了

最后:遇到API报"APP 服务被禁用":

将请求地址 https://api.map.baidu.com/geocoder/v2/

换成

https://api.map.baidu.com/reverse_geocoding/v3/

参考链接:https://www.cnblogs.com/liuyuanfang/p/9748074.html

解决百度地图API报"APP 服务被禁用"的参考链接:https://blog.csdn.net/weixin_42729938/article/details/116857796

微信小程序获取经纬度所在城市的更多相关文章

  1. 微信小程序获取当前所在城市

    本篇文章主要讲解在微信小程序中,如何利用微信自带的api(wx.getLocation())结合百度地图的逆地址解析api来获取当前所在城市名. 实现起来也比较简单,步骤为: 1--利用微信小程序接口 ...

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

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

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

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

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

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

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

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

  6. JavaScript和微信小程序获取IP地址的方法

    最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...

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

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

  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. 微服务探索之路03篇-docker私有仓库Harbor搭建+Kubernetes(k8s)部署私有仓库的镜像

    ❝ 目录: 微服务探索之路01篇.net6.0项目本地win10系统docker到服务器liunx系统docker的贯通 微服务探索之路02篇liunx ubuntu服务器部署k8s(kubernet ...

  2. 扩容新生代为什么能够提高GC的效率

    扩容新生代为什么能够提高GC的效率 该文章默认读者对JVM的基础有所了解 在学习JVM的时候,遇到了个人感觉比较有意思的问题,通过视频学习整理了一下. 先来上图: 大部分情况下,对象都会进入Eden区 ...

  3. Elasticsearch (1) 文档操作

    本文介绍如何在Elasticsearch中对文档进行操作. 1.检查Elasticsearch及Kibana运行是否正常 在浏览器输入192.168.6.16:9200,有如下输出则说明Elastic ...

  4. Spring源码-IOC部分-Xml Bean解析注册过程【3】

    实验环境:spring-framework-5.0.2.jdk8.gradle4.3.1 Spring源码-IOC部分-容器简介[1] Spring源码-IOC部分-容器初始化过程[2] Spring ...

  5. [免费下载应用]iNeuKernel.Ocr 图像数据识别与采集原理和产品化应用

    目       录 1..... 应用概述... 2 2..... 免费下载试用... 2 3..... 视频介绍... 2 4..... iNeuLink.Ocr图像数据采集应用... 2 5... ...

  6. super、this、抽象类、继承

    super 代表是父类对象,并且在创建子类对象时,就先创建父类对象,再创建子类对象,可以在子类方法中使用super调用父类的非私有方法. this 代表本类对象,谁创建就代表谁 实体类,被创建的cla ...

  7. 为什么后台给前台Date是时间戳,而前台给后台则直接是时间字符串?

    一.因为时间的格式有很多种,不同的页面可能对不同的时间显示需求不同.比如: 05-8-8 上午9:17 2005-8-8 9:17:42 2005年8月8日 上午09时17分42秒 2005年8月8日 ...

  8. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  9. web测试学习大纲

    Web测试 Web测试体系介绍 网络协议 Web开发 基础 原理 前端分析 安全性测试 可用性,兼容性 功能测试(同系统测试) 理解网络协议 互联网历史沿革 Web系统基础 Web核心技术 web服务 ...

  10. 《手把手教你》系列技巧篇(六十六)-java+ selenium自动化测试 - 读写excel文件 - 上篇(详细教程)

    1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...