微信小程序获取地理位置（显示地图并显示经纬度）

今天来说一下怎么显示地图并获取经纬度（获取到经纬度后显示地图）

首先我们先创建一个项目结构如下

我们先来看一下wxml代码

<view class="container log-list">
<map id="map" longitude="{{jd}}" latitude="{{wd}}" style="width: 100%; height: 800rpx;" show-location></map> //mp是地图标签 longitude经度 latitude纬度 根据经纬度来定位地图位置 show-location显示带有方向的当前定位点
//这是一个窗口<view class='wx_dialog_container'> <view class='wx-dialog'> <view class='wx-dialog-title'>{{title}}</view>//显示标题 <view class='wx-dialog-content'>{{content}}</view>//显示内容 </view></view> <button bindtap='location' type='primary' bindtap="modalcnt">获取经纬度</button> </view>

然后我们来看一下js代码

// pages/lol/lol.js
Page({/*** 页面的初始数据*/data: {},modalcnt: function () {var that = this//获取经纬度wx.getLocation({type: 'gcj02',success: function (res) {console.log(res)var latitude = res.latitudevar longitude = res.longitudethat.setData({wd: latitude,jd: longitude})//显示模态窗口wx.showModal({title: '获取到当前的经纬度',content: '经度：' + longitude + '，纬度：' + latitude,success: function (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*//*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

来看下效果

微信小程序获取地理位置（显示地图并显示经纬度）相关推荐

微信小程序获取地理位置失败原因及解决方案
微信小程序获取用户地理位置失败的原因主要有3种情况: 1. 手机系统设置中地理位置未开启 2. 系统未给微信app授权 3. 用户未给小程序授权地理位置信息所以需要继续完善下定位失败的处理逻辑. 1 ...
微信小程序获取地理位置失败
微信小程序获取地理位置失败手机定位服务 ==> 微信定位服务 ==> 小程序定位服务(级别由高到低) 当关闭手机定位服务或微信定位服务时,小程序的获取定位服务会失败 wx.getloca ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
微信小程序获取地理位置使用
微信小程序现在的地图定位是需要申请的.import amapFile from "../../common/amap-wx.130"; // 引入微信地图的SDK getLo ...
php根据地理位置签到,微信小程序获取地理位置实现定位签到功能
为了保证签到定位的精确性,要求开启GPS定位.小程序成功精确获取地理位置打卡签到,需要三步授权验证: 地理位置的系统开关(系统GPS开关是否打开) --系统级允许微信使用定位的开关 (微信是否有获取 ...
微信小程序获取地理位置，用户未开启手机定位时的解决方案
要点:获取地理位置时,如果获取地理位置失败,有两种情况: 1.用户未给小程序授权地理位置信息 2.系统设置中-隐私选项地理位置未开启或系统未给微信授权地理位置信息在获取地理位置信息失败后,判断用户是 ...
微信小程序获取地理位置信息
// pages/list/list.js Page({/*** 页面的初始数据*/data: {nation: '',province: '',city: '',district: '',stree ...
小程序获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡
文章目录一.小程序 1. 安装vue-jsonp 2. 引入腾讯sdk 3. 实例化 4. 二点求距离 5. 多点求距离文档地址: https://lbs.qq.com/service/webSe ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...

微信小程序获取地理位置（显示地图并显示经纬度）

微信小程序获取地理位置（显示地图并显示经纬度）相关推荐

最新文章

热门文章

​微信小程序 获取地理位置（显示地图并显示经纬度）​

​微信小程序 获取地理位置（显示地图并显示经纬度）​相关推荐

最新文章

热门文章

微信小程序获取地理位置（显示地图并显示经纬度）

微信小程序获取地理位置（显示地图并显示经纬度）相关推荐