pika_shangjia/machineAndCell/map/map.vue

<template>
	<view>
		<map id="map" style="width: 100%; height: 100vh;" :layer-style='5' :show-location='true' :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
			@callouttap='callouttap'></map>
		<view class="cover-box ddflex">
			<!-- <view style="justify-content: center;" class="ddflex fflex">
				<image class="cover-icon" src="../static/images/baojing.png"></image>
				<view>报警</view>
			</view> -->
			<view style="justify-content: center;" class="ddflex fflex" @click="daohang">
				<image class="cover-icon" src="../static/images/daohang.png"></image>
				<view>导航</view>
			</view>
		</view>
		<view class="dingwei ddflex" @click="toLocation">
			<image src="../static/images/dingwei.png"></image>
		</view>
		<view class="info-card">
			<view class="info-card-title">
				GPS
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					设备名称: {{info.user_name}}
				</view>
				<view class="fflex info-card-item-right">
					设备类型：{{info.product_type}}
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					设备编号: {{info.sim_id}}
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					设备定位时间: {{getTime(info.datetime)}}
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					地址：{{info.address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../utils/util.js";
	const app = getApp();
	const req = require("../../utils/request.js");
	// 引入SDK核心类
	var QQMapWX = require("../../utils/qqmap.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				id: null,
				map: null,
				info: {},
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 13, //缩放级别
				marker: [],


			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.getMap()
			this.toLocation()
		},
		onShow() {

		},
		onReady() {

		},
		mounted() {},
		computed: {},
		methods: {
			getMap() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/battery/bmsLocation', {
						batteryId: this.id
					}, res => {
						// this.info = res
						for (let key in res.key) {
							let index = res.key[key]
							this.info[key] = res.records[0][index]
						}
						this.marker = [{
							id: 0,
							latitude: this.info.weidu, //纬度
							longitude: this.info.jingdu, //经度
							iconPath: '', //显示的图标        
							rotate: 0, // 旋转度数
							width: 20, //宽
							height: 30, //高
							//   title:'我在这里',//标注点名
							alpha: 0.5, //透明度
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: this.info.user_name, //文本
								color: '#ffffff', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 15, //边框圆角
								borderWidth: '10',
								bgColor: '#e51860', //背景颜色
								display: 'ALWAYS', //常显
							}
						}]
						this.getAddress()
						uni.setNavigationBarTitle({
							title:this.info.user_name
						})
						r()
					})
				})
			},
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			toLocation() {
				console.log('地图控件回到原位');
				req.getLocation((res) => {
					console.log('当前位置：', res);
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.map = uni.createMapContext("map", this);
					this.map.moveToLocation()
				})
			},
			getAddress() {
				QQMapWX.initMap();
				this.location = {
					longitude: this.info.jingdu,
					latitude: this.info.weidu
				}
				QQMapWX.reverseGeocoder(location, data => {
					this.info.address = data.address
					console.log('解析后的地址地址数据：', data);
				});
			},
			getTime(time) {
				if (!time) return ''
				return util.formatTime(new Date(parseInt(time))).t1
			},
			daohang() {
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = '皮小店商家端'; //调用插件的app的名称
				// console.log("名称====" + referer);
				let endPoint = JSON.stringify({
					//终点
					'name': this.info.user_name,
					'latitude': this.info.weidu,
					'longitude':this.info.jingdu,
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
		},
		mounted() {

		},
		onPageScroll: function(e) {}
	}
</script>

<style>
	@import "./map.css";
</style>