【uniapp】 微信小程序--高德地图选取位置

已于 2024-09-29 16:43:29 修改
阅读量350 收藏 4
点赞数 5
文章标签： uni-app 微信小程序
于 2024-09-29 15:42:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74094484/article/details/142636042
版权

1、制作地图显示层(打开时置于最上层)

2、在地图显示层上制作搜索框、点击地图事件

高德方法

入门指南-微信小程序插件 | 高德地图API (amap.com)

完整代码

<template>
	<view class="sb-view">
		<view>{{address}}</view>
		<view @click="checkMap">定位</view>
		
		<view class="page-body" v-if="showMap">
			<!-- 地图 -->
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="getRes" ></map>
			</view>
			
			<!-- 搜索框 -->
			<view class="s-top">
				<input type="text" class="search" placeholder="请输入要查找的地址" :value="searchKey" @input="search" />
				<!-- 搜索建议 -->
				<view class="search-result" v-show="showResult1">
					<view class='column_item' v-for='(item, i) in data1' :key='i' @click="tapOption1(item)" >{{item.name}}</view>
				</view>
				<!-- 点击地图事件 附近地点建议 -->
				<view class="search-result" v-show="showResult">
					<view class='column_item' v-for='(item, index) in data' :key='index' @click="tapOption(item)" >{{item.name}}</view>
				</view>
			</view>
			
			<view class="txt">
				<!-- 显示选择的地点信息 -->
				<view class="add">{{ address1 }}</view>
				<view class="map-btn">
					<view @tap="confirmAddress">确定选择</view>
					<view style="color: black;background-color: #ccc;" @tap="showMap = false">退出地图</view>
				</view>
			</view>
			
			<view class="re-addbtn" @tap="resetBtn">重置</view>
		</view>

		
	</view>
</template>

<script>
	import amapFile from '@/libs/amap-wx.js'
	export default {
		data() {
			return {
				// 地图
				address: '',
				address1: '',
				allAddress: '',
				showMap: false,
				latitude: '22.803751',
				longitude: '113.293719',
				lslatitude: '22.803751',
				lslongitude: '113.293719',
				covers: [{
					id: 1,
					latitude: '22.803751',
					longitude: '113.293719',
					iconPath: '../../static/location.png',
					width: 25,
					height: 30
				}],
				showResult: false,
				showResult1: false,
				searchKey: '',
				data: '',
				data1: [],
				latitude1: '',
				longitude1: '',
				lslatitude1: '',
				lslongitude1: '',
				lat: '',
				lng: '',
				myAddress: '',
			}
		},
		methods: {
			// 打开地图
			checkMap() {
				this.latitude = this.lslatitude
				this.longitude = this.lslongitude
				this.covers = [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					width: 25,
					height: 30
				}]
				this.address1 = this.address
				this.showMap = true
			},
			
			// 重置位置
			resetBtn(){
				this.address = uni.getStorageSync('address')
				this.latitude = uni.getStorageSync('lat')
				this.longitude = uni.getStorageSync('lng')
				this.covers = [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					width: 25,
					height: 30
				}]
				this.searchKey = ''
			},
			
			// 点击获取定位
			getRes(e) {
				var that = this;
				this.showResult = false
				let txLng = e.detail.longitude
				let txLat = e.detail.latitude
				
				var myAmapFun = new amapFile.AMapWX({key:'申请的高德key'});
				myAmapFun.getPoiAround({location: e.detail.longitude + ',' + e.detail.latitude,
					success: function(data){
						// console.log(data);
						that.data1 = data.markers
						that.address1 = data.markers[0].address + ' ' + data.markers[0].name
						that.latitude1 = e.detail.latitude
						that.longitude1 = e.detail.longitude
						that.latitude = e.detail.latitude
						that.longitude = e.detail.longitude
						
						// icon
						that.covers = [{
							id: 1,
							latitude: e.detail.latitude,
							longitude: e.detail.longitude,
							iconPath: '../../static/location.png',
							width: 25,
							height: 30
						}]
						that.showResult1 = true
					},
					fail: function(info){
						//失败回调
						console.log('接口调用失败回调->', info)
					}
				})
			},
			
			// 确定位置
			confirmAddress() {
				if(this.latitude1 != '' && this.longitude1 != ''){
					this.lat = this.latitude1
					this.lng = this.longitude1
					this.allAddress = this.latitude1 + ',' + this.longitude1 + ',' + this.address1
					this.address = this.address1
					this.lslatitude = this.latitude1
					this.lslongitude = this.longitude1
					
					this.searchKey = ''
					this.showMap = false
				}else{
					uni.showToast({
						title: '还未选择地址',
						icon: 'none',
						duration: 2000
					})
				}
			},
			
			// 搜索位置
			search(e) {
				var that = this;
				this.searchKey = e.detail.value
				var myAmapFun = new amapFile.AMapWX({key:'申请的高德key'});
				myAmapFun.getInputtips({
					keywords: this.searchKey,
					city: '佛山',
					citylimit: true, // 是否强制在设置的城市内搜索，默认false
					success: function(data){
						if(data && data.tips){
							that.data = data.tips
							that.showResult = true
							that.showResult1 = false
						}
					}
				})
			},
			
			// 搜索建议 选择新地址
			tapOption(keyWord) {
				this.address1 = keyWord.name
				this.latitude1 = keyWord.location.split(',')[1]
				this.longitude1 = keyWord.location.split(',')[0]
				this.latitude = keyWord.location.split(',')[1]
				this.longitude = keyWord.location.split(',')[0]
				
				this.covers = [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					width: 25,
					height: 30
				}]
				
				this.showResult = false
				this.searchKey = this.address1
			},
			// 点击事件 附件地点建议 选择新地址
			tapOption1(item) {
				this.address1 = item.address + ' ' + item.name
				this.latitude1 = item.latitude
				this.longitude1 = item.longitude
				this.latitude = item.latitude
				this.longitude = item.longitude
				
				this.covers = [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/location.png',
					width: 25,
					height: 30
				}]
				
				this.showResult1 = false
			},
		}
	}
</script>

<style lang="less" scoped>
.page-body{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	
	.s-top{
		position: absolute;
		top: -1rpx;
		left: 0;
		width: 100%;
		height: 90rpx;
		background-color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
		.search{
			width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			background-color: #eee;
			border-radius: 30rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
		
		.search-result{
			position: absolute;
			top: 89rpx;
			left: 0;
			width: 100%;
			height: 430rpx;
			background-color: #ffffff;
			overflow-y: auto;
			padding: 20rpx 0;
			box-sizing: border-box;
			z-index: 999;
			
			.column_item{
				width: 100%;
				padding-left: 20rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				border-bottom: #e1e1e1 2rpx dashed;
			}
		}
	}
	
	.txt{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		min-height: 200rpx;
		background-color: #ffffff;
		padding-bottom: 120rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		
		.add{
			width: 100%;
			font-size: 40rpx;
			text-align: center;
		}
		.map-btn{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-evenly;
			
			view{
				color: #ffffff;
				width: 44%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: #0590e0;
			}
		}
	}
	
	.photo-box{
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		
		.photo-out{
			width: 80rpx;
			height: 80rpx;
			line-height: 40rpx;
			text-align: center;
			// border: #FFFFFF 1px solid;
			color: #FFFFFF;
			position: absolute;
			bottom: 50%;
			transform: translateY(40rpx);
			right: 100rpx;
		}
		
		.photo-btn1{
			background-color: #ffffff;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.photo-btn2{
				background-color: #000;
				width: 135rpx;
				height: 135rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.photo-btn3{
					background-color: #ffffff;
					width: 125rpx;
					height: 125rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
	.re-addbtn{
		position: absolute;
		right: 20rpx;
		bottom: 250rpx;
		font-size: 28rpx;
		width: 85rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #FFFFFF;
	}
}
</style>

效果图

nana koi
关注
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能
luhanglh的博客
07-15 4808
【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能。 uni-app实现高德地图选点功能
微信小程序：vue3+ts 中， 获取定位经纬度，打开地图
qq_58946786的博客
09-14 1274
uniapp：微信小程序+vue3+ts 中，getLocation 获取定位经纬度，openLocation打开地图
uniapp 微信小程序 选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
asdfadafd的博客
03-12 5672
uniapp 微信小程序实现选择地图位置功能 最近在做商家小程序，就是用于给实体店老板进行网上开店的小程序。 其中有一项功能就是获取商店的位置，要求支持：获取当前定位/检索到指定位置/地图选点等功能，并返回选择地点的regionId和经纬度以及详细的地址等信息。 获取地理信息的授权功能 1. manifest.json中写入授权地理位置的描述 代码如下： "permission" : { "scope.userLocation" : { "desc" : "您的位置将用于绑定您的区
uniapp 微信对接地图的三种操作
林恒的博客
11-09 1355
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 1.uni.getLocation 获取当前经维度 先上代码 let that = this // 获取用户是否开启 授权获取当前的地理位置、速度的权限。 uni.getSetting({ success (res) { ...
uniapp 小程序地图定位选点功能
sdad2154的博客
06-09 1833
效果图如下
uniapp实现城市列表选择获取经纬度、附带搜索功能（移动端、微信小程序）
m0_67584973的博客
04-15 3639
uniapp实现城市列表、区县选择、获取经纬度、重新定位、兼容android、ios、微信小程序
uniapp引用uni.chooseLocation打开地图选择位置
weixin_52830464的博客
05-30 1546
console.log('位置名称：' + res.name);console.log('详细地址：' + res.address);console.log('纬度：' + res.latitude);console.log('经度：' + res.longitude);});
uniapp写小程序实现地址导航弹出地图选择
weixin_57031986的博客
11-10 521
uniapp写小程序实现地址导航弹出地图选择
【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图
acupofcoffee的博客
04-13 1017
以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Golang知识点，真正体系化！**
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
微信小程序----高德地图API实现的DEMO
02-07
在微信小程序的开发中，高德地图API是一个常用的工具，它可以帮助开发者实现在小程序中集成地图功能，包括但不限于展示地图、定位用户位置、搜索周边兴趣点、规划路径等。本DEMO展示了如何将高德地图API与微信小程序...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
戏曲文化微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
戏曲文化微信小程序代码 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 视频...
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度
CZDBGSY的博客
09-26 535
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度。
uni-app在线预览pdf
最新发布
家里有只小肥猫
09-28 578
uniApp在线查看pdf文件
uni-app - - - - -vue3使用i18n配置国际化语言
Dark_programmer的博客
09-25 618
uni-app - - - - -vue3使用i18n配置国际化语言
uniapp中h5环境添加console.log输出
u010865136的专栏
09-26 475
uniapp的小程序开启调试模式，会看到项目的console.log，但是h5的话手机访问报错时看不到console.log，使用上方代码h5也可以看到调试效果了。
uniapp开发微信小程序--自定义顶部导航栏
09-19
UniApp 开发微信小程序时，如果你想自定义顶部导航栏，你可以通过修改项目的 JSON 文件和样式文件来实现。首先，你需要在 `config.json` 中配置页面的 `navigatorStyle`： ```json { "window": { "navigationBarTitleText": "你的标题", // 自定义标题文字 "navigationBarTextStyle": "custom", // 颜色设置，如 custom 或 default，默认为白色 "navigationBarBackgroundColor": "#333", // 自定义背景颜色 "navigationBarNeedSearchButton": false, // 是否显示搜索按钮 "navigationBarCustomView": "path_to_your_custom_view" // 如果有自定义视图路径 } } ``` 然后，在项目中创建一个单独的组件（如 `custom-navbar.vue`），用于展示你的自定义导航栏布局。在这个组件里，可以使用 Vue 的模板语法来构建导航栏，包括按钮、标题等元素，并添加所需的事件处理。 例如： ```html <template> <view class="custom-navbar"> <button @click="onButtonClick">自定义按钮</button> <text>{{ pageTitle }}</text> </view> </template> <script> export default { data() { return { pageTitle: '首页', }; }, methods: { onButtonClick() { console.log('按钮点击'); }, }, }; </script> <style scoped> .custom-navbar { /* 根据需求定制样式 */ background-color: #333; color: white; padding: 0 20rpx; } </style> ``` 将这个组件的路径添加到 `config.json` 的 `navigationBarCustomView` 字段中，就可以替换默认的导航栏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值