微信小程序使用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 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
vue.js click点击事件获取当前元素对象的操作
Aug 07 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
js window.event对象详尽解析
2009/02/17 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
高考自主招生自荐信
2013/10/20 职场文书
工地安全质量标语
2014/06/07 职场文书
新生开学寄语大全
2015/05/28 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS