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

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

声明

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

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

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

感谢： 感谢Lrj_estranged指出问题！

效果图

实现原理

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

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

赞 (0)

相关推荐

  • 微信小程序 地图（map）实例详解

    微信小程序 地图（map）实例详解

    微信小程序 地图(map)实例 这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋

  • 微信小程序开发之map地图实现教程

    微信小程序开发之map地图实现教程

    前言 微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy

  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

  • 微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

    微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

    本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能.分享给大家供大家参考,具体如下: 声明 bug: 页面搜索返回的列表在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 通过高德地图的微信小程序开发API(getInputtips),实现关

  • 微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南 最后更新时间: 2017年1月9日 本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具 按照微信小程序开发文档下载并安装微信小

  • 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&

  • 微信小程序出现wx.getLocation再次授权问题的解决方法分析

    微信小程序出现wx.getLocation再次授权问题的解决方法分析

    本文实例讲述了微信小程序出现wx.getLocation再次授权问题的解决方法.分享给大家供大家参考,具体如下: 首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) { wx.getLocation({ type: 'wgs84', success: function (res) { // 经纬度 var latitude = res.latitude var longitude = res.longitude var a

  • 微信小程序 开发MAP（地图）实例详解

    微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

  • 微信小程序 location API接口详解及实例代码

    微信小程序 location API接口详解及实例代码

    微信小程序 location API 接口: 现在微信小程序火了 ,利用假期时间学习了下,微信小程序的基础知识,嘿嘿! 以下是记录学习微信小程序 location API接口,并且写了一个小实例来记录,如有错误之处还请指正. 微信小程序的位置接口共有两个: 1.wx.getLocation(OBJECT)获取当前的地理位置.速度. 2.wx.openLocation(OBJECT) 使用微信内置地图查看位置 然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,让

  • 微信小程序 location API实例详解

    微信小程序 location API实例详解

    location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object)通过经纬度打开内置地图.其中定位获取位置信息返回参数是有问题的speed,accuracy这两个是没有的.还有一个就是打开内置地图之后再返回会报一个错误(Page route错误-WAService.js:2 navigateBack 一个不存在的webviewId0)如果有知道的可告知,我找到解决方式也会补充下! 主要属性: wx.getLocatio

  • 微信小程序使用map组件实现路线规划功能示例

    微信小程序使用map组件实现路线规划功能示例

    本文实例讲述了微信小程序使用map组件实现路线规划功能.分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图: 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程. WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car&

  • 微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能.分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. 地图采用微信小程序提供的map组件: 2. 周

随机推荐