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


Posted in Javascript onJanuary 22, 2019

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

声明

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

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

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

感谢: 感谢Lrj_estranged指出问题!

效果图

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

实现原理

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

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

WXML

<view class="map_container">
 <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'></map>
 <view class="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}">
  <view class="map-name">{{name}}</view>
  <view class="map-address">{{address}}</view>
 </view>
</view>

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 )获取坐标解析详情。

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

Javascript 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 #Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 #Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 #Javascript
JavaScript继承与聚合实例详解
Jan 22 #Javascript
JavaScript格式化json和xml的方法示例
Jan 22 #Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
You might like
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js window.event对象详尽解析
2009/02/17 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python批量解压zip文件的方法
2019/08/20 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
详解python的super()的作用和原理
2020/10/29 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
公共事业管理本科生求职信
2013/10/07 职场文书
仓库主管岗位职责
2014/03/02 职场文书
通用自荐信范文
2014/03/14 职场文书
个人安全生产承诺书
2014/05/22 职场文书
庆元旦活动总结
2014/07/09 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年双拥工作总结
2015/04/08 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
公司转让协议书
2016/03/19 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL