微信小程序在地图选择地址并返回经纬度简单示例

2024-04-24 15:20:45

本文实例讲述了微信小程序在地图选择地址并返回经纬度功能。分享给大家供大家参考，具体如下：

微信小程序的地址管理中，经常需要获取地址的详细地址信息和地址经纬度信息

wxml文件部分代码：

<button bindtap="mapView" style="margin:10px">查看地图</button>

js文件主要功能代码：

mapView:function(){
  var that = this
  wx.chooseLocation({
   success: function (res) {
    // success
    console.log(res,"location")
    that.setData({
     hasLocation: true,
     location: {
      longitude: res.longitude,
      latitude: res.latitude
     },
     detail_info: res.address,
     wd: res.latitude,
     jd: res.longitude
    })
   },
   fail: function () {
    // fail
   },
   complete: function () {
    // complete
   }
  })
}

运行效果：

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

微信小程序实现获取准确的腾讯定位地址功能示例

本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能.分享给大家供大家参考,具体如下: 官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 逆地址解析(坐标位置描述) 1. 申请开发者密钥(key)与设置个人使用:登录,点击"key管理",进入设置,选择"WebServiceAPI",如果没有小程序ID,勾选"授权IP",如果有小程序ID,勾选"域名白名单",且勾选&qu
微信小程序之获取当前位置经纬度以及地图显示详解

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增页面需要在app.json进行配置: "pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ] 通过在视图层调用bindtap与逻辑
微信小程序获取当前地理位置和经纬度实例代码

微信小程序实例-获取当前的地理位置.经纬度微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: fu
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

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

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
微信小程序实现获取自己所处位置的经纬度坐标功能示例

本文实例讲述了微信小程序实现获取自己所处位置的经纬度坐标功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>纬度:{{latitude}}</view> <view>经度:{{longitude}}</view> index.js逻辑文件代码 Page({ data: { latitude:'', longitude:'' }, onLoad: function () { var that=thi
微信小程序开发实现的IP地址查询功能示例

本文实例讲述了微信小程序开发实现的IP地址查询功能.分享给大家供大家参考,具体如下: 微信小程序开发参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ search.wxml <view class="container"> <view class="page-body"> <view class="weui-search-bar {{searchFocusC
微信小程序如何获取用户收货地址

获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并且点击确定授权. 情况二,用户点击取消授权后,再次获取授权流程: (代码逻辑整理) 1.点击事件触发函数,获取用户当前设置 2.根据用户当前设置中的用户授权结果,判断是否包含收货地址授权 3.如果包含收货地址授权并且没有取消过收货地址授权,直接调用wx.chooseAddress(),获取用户收货地址. 4.取消过收货地址授权,调用wx.openSetting(),调起客户端小程序设置
微信小程序用户位置权限的获取方法（拒绝后提醒）

微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于wx.openLocation的坐标 2. wx.chooseLocation 需要授权,打开地图选择位置第一次调用方法时先出现允许权限之后之后再出现如果第一次就不允许,则一直调用wx.chooseLocation的fail方法 3. wx.openLocation 需要授权,使用微信内置地图查
微信小程序在地图选择地址并返回经纬度简单示例

本文实例讲述了微信小程序在地图选择地址并返回经纬度功能.分享给大家供大家参考,具体如下: 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 wxml文件部分代码: <button bindtap="mapView" style="margin:10px">查看地图</button> js文件主要功能代码: mapView:function(){ var that = this wx.chooseLocation({ su
微信小程序可搜索的地址选择实现详解

这篇文章主要介绍了微信小程序可搜索的地址选择实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下最终实现效果: 效果实现步骤新建index文件夹 index.wxml  <view class='container'> <view bindtap='onChangeAddress'> <input value="{{address}}&q
微信小程序高德地图SDK详解及简单实例（源码下载）

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

微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose
微信小程序 wxapp地图 map详解

微信小程序 wxapp地图 map: map 属性名类型默认值说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 1 缩放级别 markers Array 标记点 covers Array 覆盖物标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式属性说明类型必填备注 latitude 纬度 Number 是浮点数,范围 -90 ~ 90 longitude 经度 Number 是浮
微信小程序实现收货地址左滑删除

本文实例为大家分享了微信小程序实现收货地址左滑删除的具体代码,供大家参考,具体内容如下效果: 思路: 一.用相对定位和绝对定位,列表放在上层,删除按钮放在下层(z-index不要为负). 二.触摸事件判断用户是否左滑,有 bindtouchstart,bindtouchmove,bindtouchend 三个触摸事件. 1.bindtouchstart 记录触摸开始的点.开始点的坐标在 e.touches[0] 中,这是相对于屏幕的,也就是以屏幕左上方为原点. 2.bindtouchmove
微信小程序实现图片选择并预览功能

本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textarea使用,底部保存按钮固定 (二).小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照. (三).效果图效果如下: (四).代码展示 WXML页面: <view class="wrap"> <view cl
微信小程序实现购物车选择规格颜色效果

本文实例为大家分享了微信小程序实现购物车选择规格颜色效果的具体代码,供大家参考,具体内容如下 wxml: <view> <view>规格:</view> <view class='dis'> <block wx:for="{{guige}}"> <view class="{{gindex==index?'color':''}}" bindtap='guige' data-i
微信小程序map地图使用方法详解

本文实例为大家分享了微信小程序map地图使用的具体实现代码,供大家参考,具体内容如下以下代码是主要的代码片段   <view class="map_container"> <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='
微信小程序实现地区选择伪五级联动

本文实例为大家分享了微信小程序实现地区选择伪五级联动的具体代码,供大家参考,具体内容如下效果图这里采用的是自定义多列选择器picker mode="multiSelector" <view class="section"> <view class="section__title">多列选择器</view> <picker mode="multiSelector" b

微信小程序在地图选择地址并返回经纬度简单示例

相关推荐

随机推荐