uniapp,高德地图实现选址功能(字节小程序)

<template>
	<view class="">
		<!-- 地图 -->
		<view class="map_container">
			<map class="map" id="myMap" :longitude="longitude" :latitude="latitude" scale="16" :markers="markers"
				@callouttap="callouttap" @markertap="markertap" @tap='getMap'>
			</map>
		</view>

		<!-- 详细地址 -->
		<view class="map_text">
			<view class="text">
				<text class="h1">{{textData.name}}</text>
				<text>{{textData.desc}}</text>
			</view>
			<u-button type="primary" @click="sure">确认</u-button>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	// 高德小程序SDK (下方链接下载)
	import amapFile from '@/common/amap-wx.js'
	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				key: '高德官网获取key',
				markers: [{
					iconPath: "定位点图标",
					id: 0,
					latitude: null,
					longitude: null,
					width: 23,
					height: 33
				}, ],
				textData: {},

			}
		},

		onLoad() {
			this.getNowAdress()
		},
		
		methods: {
			markertap(e) {},
			callouttap(e) {},
			// 点击地图 调用选址功能
			getMap(e) {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.textData = {
							name: res.name,
							desc: res.address
						}
						that.markers[0].latitude = res.latitude;
						that.markers[0].longitude = res.longitude;
						that.latitude = res.latitude
						that.longitude = res.longitude
					}
				});
			},
			
			sure() {
				// 确认按钮 逻辑处理
			},
			
			// 获取当前地址
			getNowAdress() {
				var that = this;
				var myAmapFun = new amapFile.AMapWX({
					key: that.key
				});
				myAmapFun.getRegeo({
					success: function(data) {
						that.markers[0].latitude = data[0].latitude;
						that.markers[0].longitude = data[0].longitude;

						that.latitude = data[0].latitude
						that.longitude = data[0].longitude
						that.textData = {
							name: data[0].name,
							desc: data[0].desc
						}
					},
					fail: function(info) {

					}
				})
			},
		},
	}
</script>

[小程序高德sdk下载地址](https://lbs.amap.com/api/wx/download)

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值