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">
				<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">
					名称: ZX03D209685
				</view>
				<view class="fflex info-card-item-right">
					状态：静止(30秒)
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					编号: 016881209685
				</view>
				<view class="fflex info-card-item-right">
					设防状态：撤防
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					控制: 已通电
				</view>
				<view class="fflex info-card-item-right">
					定位类型：LBS
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					电压: 66.99V(主电接通)
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					通信: 2023-04-0311:08:16
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					定位: 2023-04-03 11:07:46
				</view>
			</view>
			<view class="ddflex info-card-item">
				<view class="fflex">
					地址：广东省东莞市兴育路东一街2号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				map:null,
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 13, //缩放级别
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '德隆大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '羊城国际商贸中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天瑞广场A座', //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '12',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '大米和小米儿童康复(广州盈丰)中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '8',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
				],


			}
		},
		onLoad(options) {
			this.toLocation()
		},
		onShow() {

		},
		onReady() {
			
		},
		mounted(){
		},
		computed: {},
		methods: {
			//地图点击事件
			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()
					})
			}
		},
		mounted() {

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

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