微信小程序地图获取经纬度并获取经纬度的地址信息

在需要添加地图的html页面

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" bindmarkertap="markerDetail" show-location="true"></map>

js页面

// An highlighted block
wx.getLocation({type: 'gcj02',altitude:true,//高精度定位//定位成功，更新定位结果success: function (res) {var latitudee = res.latitudevar longitudee = res.longitudethat.setData({longitude:parseFloat(longitudee),latitude: parseFloat(latitudee),})},//定位失败回调fail:function(){wx.showToast({title:"定位失败",icon:"none"})},complete:function(){//隐藏定位中信息进度wx.hideLoading()}})

markers是在地图中添加一些标记点

let arr=[]arr.push({latitude:34.15775,longitude:108.90688,iconPath:"../../image/map.png", //标记点图片id:1,  //必填，每个点是单独的idwidth:'63rpx', height:'88rpx'})this.setData({markers:arr})

使用wx.getLocation的时候需要在app.json中写

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}
}

获取到经纬度之后秀需要根据经纬度获取详细地址

**
申请腾讯位置服务并且下载sdk文件链接地址.

将下载好的js文件放到指定的文件夹中
如果用的比较多的话全局引入，如果少的话当前页面引入就可以

js页面

var QQMapWX = require('../../utils/qqmap-wx-jssdk');
var qqmapsdk;
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {qqmapsdk = new QQMapWX({key: "申请的key值"});wx.getLocation({type: 'gcj02',isHighAccuracy: true,altitude: true,success(res) {qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success: function (res1) {_this.setData({positionInfo: res1.result.address_component.province + res1.result.address_component.city + res1.result.formatted_addresses.recommend})},fail: function (res2) {},complete: function (res3) {}});_this.setData({x: res.longitude,y: res.latitude})},})},
})

positionInfo就是获取到地理位置的详情信息，在开发者工具中调整的话会定位到当地政府，需要实际测得话需要在手机上测试

返回的数据如下

微信小程序地图获取经纬度并获取经纬度的地址信息相关推荐

微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
微信小程序直播状态接口如何获取
现如今,小程序直播非常的红火,越来越多的商家开通了微信小程序直播,但是在直播的过程中,偶尔会出现一些小问题,如禁播,异常状态等等,下面小编就来介绍一下微信小程序直播状态接口如何获取. 一.微信小程序直 ...
解决微信小程序云开发模式无法获取数据库数据问题
解决微信小程序云开发模式无法获取数据库数据问题问题: 在数据库有两条数据,获取数据时输出窗口没有任何反应错误原因: 检查数据库名字是否对应检查你是否有多个云开发环境如果有多个云开发环境,就需要 ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序地图使用用户头像标记
一.在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语. 二.自己在开发时遇到的问题: 1.微信头像是网络图片,而地图的 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...

微信小程序地图获取经纬度并获取经纬度的地址信息

使用wx.getLocation的时候需要在app.json中写

获取到经纬度之后秀需要根据经纬度获取详细地址

微信小程序地图获取经纬度并获取经纬度的地址信息相关推荐

最新文章

热门文章