uniapp使用内置地图选择插件,实现地址选择并在地图上标点

2024-06-21 19:18

本文主要是介绍uniapp使用内置地图选择插件,实现地址选择并在地图上标点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

uniapp使用内置地图选择插件,实现地址选择并在地图上标点

 

代码如下:

<style>page{ background:#F4F5F6; }::-webkit-scrollbar {width: 0;height: 0;color: transparent;}page{ height:100%; width:100%; font-size:24rpx;}image,view,input,textarea,label,text,navigator{ box-sizing: border-box; color:#222; font-size:28rpx;}image{width:100%; height:100%;}.line1{ white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}.line2{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }.flex{ display: flex; align-items: center;}.center{ display: flex; align-items: center; justify-content: center;}.between{ display: flex; align-items:center; justify-content: space-between;}.btn{ background:#f60; box-shadow: none; width:100%; text-align: center; line-height:92rpx; height:92rpx; border-radius:16rpx; color:#fff; border:0; font-size:32rpx;}.btn:active{ opacity:0.8;}.btn::after{display:none;}	
</style>
<style lang="scss" scoped>
.addaddress{ height:100%; overflow: hidden; .maps{ height:400rpx;}.box{padding:0 30rpx; position:relative; margin-top:-50rpx}.form{  background:#fff; border-radius:24rpx;&.f2{ margin-top:20rpx; }&.bd0{ border-bottom:0;}.item{ min-height:108rpx; padding:0 24rpx;			 .fl{ width:140rpx;}.fr{ flex:1; border-bottom:1px solid #F4F5F6; padding:40rpx 0;.yhname{}.area{padding-top:20rpx; color:#a5a5a5;}.loca{width:32rpx; height:32rpx; margin-right:8rpx;}.intxt{ flex:1; border:0; background:none;}.radios{.s1{margin-left:15rpx;}.radio{ transform: scale(0.65);}}}}.btn{ border-radius:48rpx; margin-top:90rpx;}}
}	
</style>
<template>
<view class="addaddress"><view class="maps"><map :longitude="longitude" :latitude="latitude" :scale="14" style="width:100%;height:100%;" :markers="markers"></map></view><view class="box"><view class="form"><view class="item flex" style="align-items: flex-start;"><view class="fl" style="padding:40rpx 0;">地址</view><view class="fr" @tap="chooseLocation"><view class="yhname flex"><input type="text" class="intxt" v-model="form.name" disabled placeholder="请选择地址" placeholder-style="color:#CBCBCB"><arrow-right :size="13" color="#CBCBCB"></arrow-right></view><view class="area" v-if="form.area">{{form.area}}</view></view></view><view class="item flex"><view class="fl">门牌号</view><view class="fr flex bd0"><input type="text" class="intxt" placeholder="街道、楼牌号等详细地址" placeholder-style="color:#CBCBCB"></view></view>		 </view><view class="form f2"><view class="item flex"><view class="fl">联系人</view><view class="fr between"><input type="text" class="intxt" placeholder="请输入联系人" placeholder-style="color:#CBCBCB"><view class="radios flex"><view class="s1 flex"><radio color="#4CD964" class="radio"></radio>先生</view><view class="s1 flex"><radio color="#4CD964" class="radio"></radio>女士</view></view></view></view><view class="item flex"><view class="fl">手机号</view><view class="fr flex"><input type="text" class="intxt" placeholder="联系人手机号码" placeholder-style="color:#CBCBCB"></view></view><view class="item"><button class="btn">保存</button></view></view></view>
</view>	
</template><script>export default{data(){return{longitude: 119.39742,latitude: 39.909,markers:[{longitude: 119.39742, latitude: 39.909,iconPath: '/static/address.png'}],form:{name:'',area:'',address:'',location:'',}}},onLoad() {this.$nextTick(res=>{			this.init()})},methods:{	//定位init(){uni.getLocation({type: 'wgs84',success:(res) => {if(res.errMsg=="getLocation:ok"){this.setMap(res)}}});},//自带选址chooseLocation() {uni.chooseLocation({success: (res) => {console.log(res)this.form.name = res.namethis.form.area = res.addressthis.form.location = this.util.formatLocation(res.longitude, res.latitude)this.setMap(res)}})},//设置地图坐标setMap(res){this.longitude = res.longitudethis.latitude  = res.latitudethis.markers[0].longitude =  res.longitudethis.markers[0].latitude  =  res.latitude}}}
</script><style>
</style>

这篇关于uniapp使用内置地图选择插件,实现地址选择并在地图上标点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1082102

相关文章

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专