zx_flk_app/pages/message/location.vue

<template>
	<view class="">

		<!-- #ifndef APP -->
		<map @touchmove="hiddenNav" @markertap="showNav" style="width: 100%; height: calc(100vh - 506rpx);"
			:latitude="latitude" :longitude="longitude" :markers="markers" show-location>
		</map>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<googleMap width="100%" height="600rpx" :mapData="{type:3,markers,zoom:13}" :myLocations='myLocation'>
		</googleMap>
		<!-- #endif -->

	</view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import googleMap from "@/component/googleMap/googleMap";
	const http = require('../../common/request.js');
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	import controlMixin from '@/mixin/index';
	export default {
		mixins: [controlMixin],
		components: {
			googleMap
		},
		props: {
			latlng: {
				type: Object,
				default: () => {

				}
			}
		},
		watch: {
			latlng: {
				handler: function(newVal) {
					if (newVal) {
						this.init()
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				address: '',
				city_name: '',
				is_show_nav: true,
				myLocation: {
					// latitude:39.909,
					// longitude: 116.39742,
				},
				markers: [], // 标记点
				plate_number: '',
				carLocationTimer: null, // 定时器变量，用于清除定时器
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		mounted() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {

		},
		methods: {
			init() {
				this.myLocation.latitude = this.latlng.latitude || 28.909
				this.myLocation.longitude = this.latlng.longitude || 115.39742
				// this.getAddressName(this.myLocation.latitude, this.myLocation.longitude)
				let _this = this
				uni.getLocation({
					success(res) {
						_this.myLocation.latitude = res.latitude
						_this.myLocation.longitude = res.longitude
						_this.markers = [{
								width: 80 / 2,
								height: 108 / 2,
								longitude: _this.myLocation.longitude,
								latitude: _this.myLocation.latitude,
								iconPath: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
								iconPathActive: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
								content: ''
							},
							{
								width: 22,
								height: 40,
								id: 50000,
								iconPath: "https://zxappfile.bms16.com/zx_client/location_n.png",
								longitude: res.longitude,
								latitude: res.latitude,
							}
						]
					}
				})
			},
			navAddress() {
				const that = this;
				uni.openLocation({
					latitude: that.latitude - 0,
					longitude: that.longitude - 0,
					scale: 15,
					name: that.city_name,
					address: that.address_name,
					success: function(res) {}
				});
			},

			async loadCarAddress() {
				const that = this
				http.postApi(config.API_DAYHIRE_CAR_LOCATION, {
					plate_number: this.plate_number
				}, (resp) => {
					if (resp.data.code === 200) {
						this.latitude = resp.data.data.latitude
						this.longitude = resp.data.data.longitude
						this.markers[0].latitude = resp.data.data.latitude
						this.markers[0].longitude = resp.data.data.longitude

					} else {
						// 默认返回上一个页面再提示报错
						uni.navigateBack({
							delta: 1
						})
						common.simpleToast(resp.data.msg)
					}
				})
			},

			async getAddressName(latitude, longitude) {
				const that = this
				//#ifdef MP-ALIPAY
				var _pi = "ali_index"
				//#endif
				//#ifdef MP-WEIXIN
				var _pi = "wx_index"
				//#endif
				//#ifdef APP
				var _pi = "APP"
				//#endif
				const location = {
					lat: that.latitude,
					lng: that.longitude,
					pi: _pi
				}
				let {
					data
				} = await http.postApi(config.API_MAP_REGEO, location)
				console.log(data.data.data)
				if (data.code == 200) {
					this.address = data.data.data.address
				}
			},

			hiddenNav() {
				this.is_show_nav = false
			},

			showNav() {
				this.is_show_nav = true
			},

			findCar() {
				const me = this
				uni.showModal({
					title: '提示',
					content: '您确认开启闪灯鸣笛吗',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							me.setData({
								popText: '闪灯鸣笛',
								cmdType: 'findCar',
							})
							me.tapBlueToothCmd('', true)
						}
					},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			navAddress() {
				const {
					latitude,
					longitude,
					cityname,
					address,
					model_name
				} = this.car_info
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: model_name,
					address: address,
					success: function(res) {}
				});
			}
		}
	};
</script>

<style>
	@import './carLocation.css';
</style>