uni-app GPS定位显示（存一下档）

最新推荐文章于 2024-05-29 11:16:42 发布

1620°四周半地菜

最新推荐文章于 2024-05-29 11:16:42 发布

阅读量102

点赞数 2

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/m0_74265954/article/details/138140049

版权

在改，怕忘

<template>
	<view class="wrap">
		<view class="dev-area">
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">latitude </view>
					<image class="dev-logo" src="../../static/weidu.png" mode=""></image>
				</view>
				<view class="dev-data"> {{latitude}} °N</view>
			</view>

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">longitude </view>
					<image class="dev-logo" src="../../static/jingdu.png" mode=""></image>
				</view>
				<view class="dev-data"> {{longitude}} °E</view>
			</view>

		</view>

		<view class="">
			<map :scale="scale" style="width: 680rpx; height: 520rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>

	</view>


</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				token: '',

				markers: [{
					id: 0, //使用marker点击事件需要填写id
					latitude: '',
					longitude: '',
					iconPath: '../../static/location.png'
					
				}]
			}
		},
		onLoad() {
			const params = {
				author_key: 'AywL1Tlaymec4O2XauIyAvkvvsOc0TRGE5Yqh1npHVfDtyJBdKXH7OxQ92fzHfD7BRZyiKCHROqGSY+wbLJIqg==',
				version: '2022-05-01',
				user_id: '371490',
			}
			this.token = createCommonToken(params);
		},
		onShow() {
			this.fetchDevData();
			setInterval(() => {
				this.fetchDevData();
			}, 300)
		},
		methods: {
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
					method: 'GET',
					data: {
						product_id: '4f892NM8Ku',
						device_name: 'gps'
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						console.log(res.data.data[0].value); //打印第一项 纬度
						this.latitude = res.data.data[0].value;
						console.log(res.data.data[1].value); //打印第二项 经度
						this.longitude = res.data.data[1].value;
					}
				});

			}
		}
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.dev-area {
		display: flex;
		flex-wrap: ;
		margin-top: 50rpx;


		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dev-cart {
		height: 250rpx;
		width: 680rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-name {
		font-size: 50rpx;
		text-align: center;
		color: #8f8f94;
	}

	.dev-logo {
		width: 130rpx;
		height: 130rpx;
		margin-top: 10rpx;
	}

	.dev-data {
		font-size: 50rpx;
		text-align: center;
		color: black;
	}

	/* 	.map {
		height: 520rpx;
		width: 680rpx;
		margin-top: 10rpx;
	} */

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>