微信小程序使用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 清空form表单中某种元素的值
Dec 26 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
ADODB类使用
2006/11/25 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
Python的迭代器和生成器
2015/07/29 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python读写文件write和flush的实现方式
2020/02/21 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
sort命令的作用和用法
2012/11/04 面试题
创先争优演讲稿
2014/09/15 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
python scrapy简单模拟登录的代码分析
2021/07/21 Python