热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

微信小程序使用map组件实现解析经纬度功能示例

这篇文章主要介绍了微信小程序使用map组件实现解析经纬度功能,涉及微信小程序map组件结合高德地图进行经纬度获取相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考,具体如下:

声明

bug: 页脚的详细地址在真机测试是会出现不显示问题?

造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!

解决办法:将该文本视图采用cover-view,放在map中。

感谢: 感谢Lrj_estranged指出问题!

效果图

实现原理

1. map组件实现定位标记或者指定定位标记,并保存location。

2. 采用高德地图微信小程序开发API(getRegeo)获取当前位置或者指定位置的详细描述。

WXML


 
 
  {{name}}
  {{address}}
 


JS

获取当前位置的经纬度解析详情

const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
 data:{
  isShow: true,
  longitude:null,
  latitude:null,
  markers:[],
  points:[],
  name:'',
  address:'',
  location:''
 },
 onLoad(){
  var _this = this;
  var myAmap = new amap.AMapWX({ key: key });
  // 获取定位地址的描述数据
  _this.getRegeo(myAmap);
 },
 getRegeo(myAmap){
  var _this = this;
  myAmap.getRegeo({
   iconPath: '../../src/images/ding.png',
   width: 32,
   height: 32,
   location: _this.data.location,
   success(res) {
    var obj = res[0];
    if (obj) {
     _this.setData({
      longitude: obj.longitude,
      latitude: obj.latitude,
      name: obj.name,
      address: obj.desc,
      points: [{
       longitude: obj.longitude,
       latitude: obj.latitude
      }],
      markers: [{
       id: obj.id,
       latitude: obj.latitude,
       longitude: obj.longitude,
       iconPath: obj.iconPath,
       width: obj.width,
       height: obj.height
      }]
     })
    }
   },
   fail(res) {
    wx.showToast({ title: '失败!' })
   }
  })
 }
})

获取指定位置的经纬度解析详情

// 获取输入地址的location
// 假如输入的是:成都 欧尚庭院
myAmap.getInputtips({
 keywords: '欧尚庭院',
 city:'成都',
 success(res){
  _this.setData({
   location: res.tips[0].location
  })
  /************************************************/
  // 获取输入地址描述数据
  _this.getRegeo(myAmap);
  /************************************************/
 }
})

总结

1. 获取当前定位坐标的经纬度解析详情,直接调用高德地图API(getRegeo ),返回默认当前坐标的详情。

2. 获取指定定位坐标的经纬度解析详情,通过高德地图API(getInputtips)或者微信小程序的API(wx.chooseLocation)获取指定位置的 location ,通过高德地图API(getRegeo )获取坐标解析详情。

希望本文所述对大家微信小程序开发有所帮助。


推荐阅读
  • 微信小程序图片上传功能详解:wx.chooseImage与wx.uploadFile的使用方法与注意事项
    在微信小程序中,图片上传功能是开发者常用的功能之一。本文详细介绍了 `wx.chooseImage` 和 `wx.uploadFile` 的使用方法及注意事项。通过 `wx.chooseImage`,用户可以选择本地图片或拍摄新照片,而 `wx.uploadFile` 则用于将选中的图片上传到服务器。文章还提供了代码示例,帮助开发者更好地理解和应用这两个 API。此外,文中还讨论了常见的错误处理和性能优化技巧,确保图片上传过程的稳定性和高效性。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 解决Only fullscreen opaque activities can request orientation错误的方法
    本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误,并提供了一种有效的解决方案。 ... [详细]
  • C盘无法格式化的原因及解决方法
    本文探讨了C盘无法格式化的原因,并提供了详细的解决方案,帮助用户顺利进行系统维护。 ... [详细]
  • 本文将详细介绍如何注册码云账号、配置SSH公钥、安装必要的开发工具,并逐步讲解如何下载、编译 HarmonyOS 2.0 源码。通过本文,您将能够顺利完成 HarmonyOS 2.0 的环境搭建和源码编译。 ... [详细]
  • Scrum立会报告+燃尽图(十月十七日总第八次):分配Alpha阶段任务
    此作业要求参见:https:edu.cnblogs.comcampusnenu2018fallhomework2246项目地址:https:git.co ... [详细]
  • 如何在任意浏览器中轻松安装并使用VSCode——Codeserver简易指南
    code-server 是一款强大的工具,允许用户在任何服务器上部署 VSCode,并通过浏览器进行访问和使用。这一解决方案不仅简化了开发环境的搭建过程,还提供了高度灵活的工作方式。用户只需访问 GitHub 上的官方仓库(GitHub-coder/code-server),即可获取详细的安装和配置指南,快速启动并运行 code-server。无论是个人开发者还是团队协作,code-server 都能提供高效、便捷的代码编辑体验。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 经过短暂的休整,我们再次推出新的小程序功能,进一步提升用户体验。现在,小程序页面不仅支持放置转发按钮,还新增了长按快速转发的功能,让用户能够更加便捷地分享页面内容。这一更新将为开发者提供更多创意空间,同时也大幅提升了用户的互动性和使用便利性。 ... [详细]
  • Java 点餐系统源代码附带管理后台(免费提供)
    本项目提供了一套基于 Java 的点餐系统,包括前端小程序和后端管理平台。采用 Spring Boot 和 SSM 框架,结合 MySQL 和 Redis 数据库技术,适用于学习和二次开发。有需要源代码的开发者可以通过私信联系,免费获取下载链接。 ... [详细]
  • 基于Java的微信小程序:Spring Boot驱动的中小学家校互动与电子作业管理平台
    基于Java的微信小程序,采用Spring Boot作为后端框架,构建了一个高效的中小学家校互动与电子作业管理平台。前端使用了uni-app框架,确保跨平台兼容性。该平台集成了家校沟通、作业发布与管理、学生成绩查询等功能,旨在提升教育管理效率和家长参与度。后端开发环境配置完善,采用Spring Boot、MyBatis等技术栈,确保系统的稳定性和扩展性。 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 经过半年的精心整理,我们汇总了当前市场上最全面的Android面试题解析,为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题,帮助读者全面提升技术实力和面试表现。章节目录包括:- 第一章:Android基础面试题- 第二章:... ... [详细]
author-avatar
手机用户2502852661
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有