微信小程序选择地址填写详细地址定位地点

感觉自己做了一个没有意义的东东，选择地址填写详细地址就可以找到那个地方。

如下图所示

首先需要一个写好的城市选择器，你可以自己写，也可以私信我h(￣▽￣)~*

这是外部引入的组件

<area_picker show="{{show}}" bind:sureSelectArea="sureSelectAreaListener"></area_picker>

重点需要看官方使用文档

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGeocoder

接下来就是拼接出详细地址

 <view class="card-top">   //选择器选择地址<view class="remark">收货地址</view><view class="inputs" bindtap="chooseloaction" ><text decode="{{true}}">{{province}}&nbsp;{{city}}&nbsp;{{area}}</text></view><image class="tolocation" bindtap="getLocation" src="../../../static/images/location/all.png"></image></view><view class="line"></view><view class="card-top"><view class="remark">门牌号</view><input class="input" name='locationname' placeholder="例：1号楼201" /></view></view>

  chooseloaction: function (e) {   //显示引入的选择器this.setData({show: true})},sureSelectAreaListener: function (e) {console.log(e)var that = this;var province = e.detail.currentTarget.dataset.provincevar city = e.detail.currentTarget.dataset.cityvar area = e.detail.currentTarget.dataset.areavar location = province+city+areaconsole.log(location)that.setData({show: false,province: province,city: city,area: area,location:location})},

传入markers地图显示

<map id="myMap"markers="{{markers}}"style="width:100%;height:100%;"longitude="{{poi.longitude}}"latitude="{{poi.latitude}}"scale='16' show-location>
</map>

整合代码

<form bindsubmit='formSubmit'><view class="title"><view class="card-top">   //选择器选择地址<view class="remark">收货地址</view><view class="inputs" bindtap="chooseloaction" ><text decode="{{true}}">{{province}}&nbsp;{{city}}&nbsp;{{area}}</text></view><image class="tolocation" bindtap="getLocation" src="../../../static/images/location/all.png"></image></view><view class="line"></view><view class="card-top"><view class="remark">门牌号</view><input class="input" name='locationname' placeholder="例：1号楼201" /></view><view class="line"></view><map id="myMap"markers="{{markers}}"style="width:100%;height:100%;"longitude="{{poi.longitude}}"latitude="{{poi.latitude}}"scale='16' show-location>
</map></view>
<button class="tap" formType="submit">保存</button><area_picker show="{{show}}" bind:sureSelectArea="sureSelectAreaListener"></area_picker>   //引入的组件</form>

js里面的代码

注意前期的准备

可以去我前一篇看
1.需要用到微信小程序JavaScript SDK
2.需要申请key
3.需要下载
https://blog.csdn.net/weixin_44132829/article/details/108142825

  formSubmit: function (e) {var _this = this;var detailmessage=e.detail.valuevar detail=_this.data.location+detailmessage.locationname//把详细地址拼接起来//下面的是在官网的qqmapsdk.geocoder({//获取表单传入地址address: detail, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'success: function(res) {//成功后的回调console.log(res);var res = res.result;var latitude = res.location.lat;var longitude = res.location.lng;_this.setData({ // 获取返回结果，放到markers及poi中，并在地图展示markers: [{id: 0,title: res.title,latitude: latitude,longitude: longitude,iconPath: '../../../static/images/shopping/round.png',//图标路径width: 20,height: 20,callout: { //可根据需求是否展示经纬度content: latitude + ',' + longitude,color: '#000',display: 'ALWAYS'}}],poi: { //根据自己data数据设置相应的地图中心坐标变量名称latitude: latitude,longitude: longitude}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})},

综合的代码

var QQMapWX = require('../../../qqmap-wx-jssdk1.0/qqmap-wx-jssdk');
var qqmapsdk;Page({/*** 页面的初始数据*/data: {poi:{},marks:[],province: "请选择收货地址",city: "",area: "",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {qqmapsdk = new QQMapWX({key: 'UOTBZ-YBFKX-S2S4R-7LT5P-FHLNS-PYFZU'})},sureSelectAreaListener: function (e) {console.log(e)var that = this;var province = e.detail.currentTarget.dataset.provincevar city = e.detail.currentTarget.dataset.cityvar area = e.detail.currentTarget.dataset.areavar location = province+city+areaconsole.log(location)that.setData({show: false,province: province,city: city,area: area,location:location})},chooseloaction: function (e) {   //这个是地址选择器show变为true时显示this.setData({show: true})},formSubmit: function (e) {var _this = this;var detailmessage=e.detail.valuevar detail=_this.data.location+detailmessage.locationnameqqmapsdk.geocoder({//获取表单传入地址address: detail, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'success: function(res) {//成功后的回调console.log(res);var res = res.result;var latitude = res.location.lat;var longitude = res.location.lng;_this.setData({ // 获取返回结果，放到markers及poi中，并在地图展示markers: [{id: 0,title: res.title,latitude: latitude,longitude: longitude,iconPath: '../../../static/images/shopping/round.png',//图标路径width: 20,height: 20,callout: { //可根据需求是否展示经纬度content: latitude + ',' + longitude,color: '#000',display: 'ALWAYS'}}],poi: { //根据自己data数据设置相应的地图中心坐标变量名称latitude: latitude,longitude: longitude}});},fail: function(error) {console.error(error);},complete: function(res) {console.log(res);}})},
})

微信小程序选择地址填写详细地址定位地点相关推荐

微信小程序根据坐标点解析地址常见报错：请求来源未被授权
功能需求微信小程序提供的接口能够获取到当前位置的坐标(经纬度),但是不能得到当前位置的地址.或者从后台获取到坐标(经纬度)要解析成文字描述的地址小程序也没有对应的接口. 实现思路这时候就需要通过腾 ...
微信小程序|area组件使用的地址数据文件plus
area组件使用的地址数据文件前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意前言实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...
微信小程序知道商家的具体地址但不知道经纬度如何通过自身的位置再通过距离的远近接单？
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年. 微信小程序知道商家的具体地址但不知道经纬度如何通过自身的位置再通过距离的远近接单? 话不多说按步骤来就完事了第一步 ...
微信小程序——获取视频的URL地址【已解决】
微信小程序--获取视频的URL地址[已解决] 如何获取音乐MV的URL地址虾米音乐试了很多音乐网站发现"虾米音乐"的MV的URL地址是可以获取的,并且在微信小程序播放视频的时候 ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
微信小程序选择和上传图片
文章目录微信小程序选择和上传图片微信小程序选择和上传图片选择和上传图片用到的api: wx.chooseImage() 和 wx.uploadFile() 具体实现代码如下: wx.choose ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序选择视频，获取封面缩略图
使用微信小程序选择视频,且获取其封面使用微信小程序选择视频上传,且获取其封面背景名词参考效果图展示结束: 使用微信小程序选择视频上传,且获取其封面背景又一活儿,要从小程序里选择视频,上 ...