微信小程序使用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控制iframe滚动的代码
Apr 10 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
xmlHTTP实例
2006/10/24 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python的Tqdm模块的使用
2018/01/10 Python
python文本数据相似度的度量
2018/03/12 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python有参函数使用代码实例
2020/01/06 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
编写python代码实现简单抽奖器
2020/10/20 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
创业计划书如何吸引他人眼球
2014/01/10 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
人事经理岗位职责
2014/04/28 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Python echarts实现数据可视化实例详解
2022/03/03 Python
python单向链表实例详解
2022/05/25 Python