图文并茂--微信小程序,获取用户地理位置信息,并调用腾讯地图API来获取用户具体位置

人生苦短,我们要:

在这里插入图片描述

这是一篇六个月之前写的文章,我忘记发了。。。。。。

今天开始搞这个东西,下面是详细的记录

先看一下效果啦

1.小程序代码先获取用户基础位置信息

js

data: {
    myLocation: 'GET LOCATION',
      },
openMap() {
    var myThis = this
    wx.getLocation({
      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        // success
        console.log('获取位置2');
        myThis.setData({
          myLocation: JSON.stringify(res)
        })
        console.log(res.latitude);
        console.log(res.longitude);

        wx.openLocation({
          latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
          longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
          scale: 28, // 缩放比例
          name: "要找的地方名字(某某饭店)",
          address: "地址:要去的地点详细描述"
        })
      }
    })
  },
openMap1() {
    var myThis = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        // 纬度,范围为 -90~90,负数表示南纬
        const latitude = res.latitude
        // 经度,范围为 -180~180,负数表示西经	
        const longitude = res.longitude
        // 速度,单位 m/s	
        const speed = res.speed
        // 位置的精确度,反应与真实位置之间的接近程度,可以理解成10即与真实位置相差10m,越小越精确
        const accuracy = res.accuracy
        myThis.setData({
          myLocation: '当前经度:' + latitude + '\n' + '当前纬度:' + longitude + '\n' + '当前速度:' + speed + '\n' + '当前位置精确度:' + accuracy
        })
        console.log(res.latitude);
        console.log(res.longitude);
      }
    })
  },

html

 <button type="default" bindtap="openMap">点击打开地图</button>
 <button type="default" bindtap="openMap1">点击获取我的位置</button>
 <text >{{myLocation}}</text> 

app.json

"pages": [
        "pages/index/index"
    ],
 "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },

下面开始调用腾讯地图API进行解析我们的经纬度

注册账号

点此进入腾讯地图文档

创建应用,获取KEY,




发请求进行经纬度解析




JS

欢迎大家指出文章需要改正之处~
学无止境,合作共赢
在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序开发是指利用微信开发者工具和相关开发技术,开发出符合微信小程序平台的应用程序。微信小程序具有轻量化、快速启动、低资源占用等特点,被广泛用于各类行业的应用开发。在开发过程中,有许多教程和案例供开发者参考学习。 图解案例教程是一种以图文结合方式呈现的教学材料,通过图示和文字详细介绍了每一个开发步骤,方便初学者理解和操作。有关微信小程序开发的图解案例教程,通常会包含如下内容: 1. 准备工作:介绍如何下载和安装微信开发者工具以及其他必要的开发环境。 2. 界面设计:介绍如何使用微信小程序提供的组件和样式,设计小程序的界面布局和风格。 3. 数据交互:介绍如何通过微信小程序提供的API实现与后台服务器的数据交互,包括发送请求、接收响应等操作。 4. 功能实现:介绍如何使用微信小程序提供的API实现各种功能,比如图片轮播、下拉刷新、地理位置定位等。 5. 调试和发布:介绍如何使用微信开发者工具进行小程序的调试和测试,以及如何将小程序发布到线上供用户使用。 在学习微信小程序开发的过程中,利用图解案例教程可以更直观地理解和掌握相关知识和技巧。通过实际操作案例的演示和讲解,开发者可以更快速地上手并运用到自己的项目中。同时,图解案例教程也有助于培养学习者的解决问题的能力和独立思考能力。 总之,微信小程序开发图解案例教程是一种简洁明了、易于理解和操作的学习资料,对于想要入门微信小程序开发的人来说,是一种很好的学习资源。 ### 回答2: 微信小程序开发是一种快速、灵活、便捷的应用程序开发方式,可以满足不同用户的个性化需求。对于想要深入学习微信小程序开发的人来说,图解案例教程pdf是非常有帮助的资源。 首先,图解案例教程能够提供直观的视觉效果,通过图文并茂的方式让开发者更好地理解和掌握微信小程序开发的基本知识、流程和技巧。有时候,文字描述可能会比较抽象,但是通过图解,可以让开发者更加直观地了解具体的实现过程,提升学习效果。 其次,图解案例教程能够帮助开发者更好地理解微信小程序开发的逻辑和思维方式。通过观察图解案例中的各个模块、组件和交互效果,开发者可以加深对微信小程序框架和组件的理解,从而更好地进行自己的开发工作。 最重要的是,图解案例教程pdf可以作为开发者的参考手册,供他们在实际开发过程中查阅和使用。遇到问题时,可以通过图解案例中的具体示例进行参考和解决,提高开发效率和准确性。 总而言之,微信小程序开发图解案例教程pdf是一种很好的学习资源,可以帮助开发者更好地理解和掌握微信小程序开发的知识和技巧。通过图文并茂的方式,提供直观的视觉效果和实例,对于想要深入学习微信小程序开发的人来说,是非常有帮助的。 ### 回答3: 微信小程序开发是一种基于微信平台的应用程序开发方式,通过微信开发工具可以创建和调试小程序小程序具有占用空间小、使用方便快捷等特点,因此受到了许多开发者和用户的喜爱。 如果你对微信小程序开发感兴趣,我建议你可以寻找一些图解案例教程PDF来学习。这些教程通常会以图文结合的方式,通过实际案例来演示如何开发微信小程序。 首先,你可以在网上搜索相关的图解案例教程PDF,比如在微信公众平台上可以找到一些官方提供的教程资源。这些教程一般会从基础入门开始,逐渐深入介绍小程序开发的各个方面,包括界面设计、数据交互、接口调用等。通过图文结合的方式,你可以更加直观地理解每一个步骤和概念。 其次,你也可以考虑购买一些专门的微信小程序开发书籍,这些书籍通常也会提供一些图解案例教程。在书籍中,你可以找到更加系统和完整的学习内容,涵盖了更多的开发技巧和实战经验。 最后,你还可以参考一些在线的视频教程,一些视频教程内容更加生动有趣,通过实际操作演示来帮助你更好地理解和掌握微信小程序开发的技能。 总之,通过寻找图解案例教程PDF来学习微信小程序开发是一个不错的选择。希望你能够通过这种方式获得对微信小程序开发的全面了解,并能够成功开发出自己的小程序项目。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值