uniapp中,首先显示一个大的地图,点击地图上的点,缩小地图并且在下方显示地图上的点对应的内容
<template>
<view class="content">
<map id="map" :style="{ width: '100%', height: selectedMarker.title?'50vh':'76vh',zIndex:'500' }" :markers="markers" :longitude="longitude"
:latitude="latitude" :scale="scale" @markertap="markerTap">
</map>
<view class="info-view" :style="{ visibility: selectedMarker.title ? 'visible' : 'hidden' }" style="position:fixed;bottom:17vw;width: 95%;">
<view class="flex justify-between padding">
<view class="flex">
<image src="../../static/moren.jpeg" mode="" class="alarm_iamge"></image>
<view class="flex flex-direction justify-between align-center">
<span class="alarm_name text-bold">{{ selectedMarker.name }}</span>
<span>【{{ selectedMarker.zhuang }}】</span>
</view>
</view>
<view class="">
<view class="flex align-center justify-between">
<span class="text-bold">{{ selectedMarker.dian }}%</span>
<image class="Personnel_image" src="../../static/DL.png" mode=""></image>
</view>
<view class="flex align-center justify-between">
<span class="text-bold">{{ selectedMarker.wen }}°C</span>
<image class="Personnel_image" src="../../static/WDJ-01.png" mode=""></image>
</view>
</view>
</view>
<view class="flex justify-between">
<view class="padding" style="background-color: azure;width: 75%;border-radius: 5px;">
<view class="flex justify-between margin-bottom-sm">
<view class="flex align-center">
<image class="Personnel_image margin-right-xs" src="../../static/heart.png" mode=""></image>
<span class="text-bold">心率:{{ selectedMarker.xinlv }}(次/分)</span>
</view>
<view class="flex align-center">
<image class="Personnel_image margin-right-xs" src="../../static/XY-copy.png" mode="">
</image>
<span class="text-bold">血氧:{{ selectedMarker.xueyang }}%</span>
</view>
</view>
<view class="flex justify-between margin-bottom-sm">
<view class="flex align-center">
<image class="Personnel_image margin-right-xs" src="../../static/BS.png" mode=""></image>
<span class="text-bold">步数:{{ selectedMarker.steps }}</span>
</view>
<view class="flex align-center">
<image class="Personnel_image margin-right-xs" src="../../static/SM.png" mode=""></image>
<span class="text-bold">睡眠:{{ selectedMarker.sleep }}</span>
</view>
</view>
<view class="flex justify-between">
<view class="flex align-center">
<image class="Personnel_image margin-right-xs" src="../../static/SSYSZY.png" mode="">
</image>
<span class="text-bold">血压:{{ selectedMarker.xueya}}mmHg</span>
</view>
</view>
</view>
<view class="flex justify-center align-center"
style="width:20%;background-color: darkseagreen;border-radius: 5px;color: white;">
<span>导航</span>
</view>
</view>
</view>
<!-- <view class="debug-info">
{{ debugInfo }}
</view> -->
</view>
</template>
<script>
export default {
name: 'HomeMap',
data() {
return {
longitude: 116.397128,
latitude: 39.916527,
scale: 10,
debugInfo: '', // 用于存储调试信息
markers: [{
id: 0,
longitude: 116.397128,
latitude: 39.916527,
iconPath: '/static/logo/58x58.png',
width: 50,
height: 50,
title: '天安门',
description: '这是中国北京的中心地标之一。',
image: '/static/mmmoren.jpeg',
name: '张三',
zhuang: '在线',
dian: '75',
wen: '36.5',
xinlv: '78',
xueyang: '98',
xueya: '120/80',
steps: '5600',
sleep: '良好'
}, {
id: 1,
longitude: 116.402854, // 经度值:北京国家体育场
latitude: 39.99285, // 纬度值:北京国家体育场
iconPath: '/static/logo/58x58.png',
width: 50,
height: 50,
title: '北京国家体育场',
description: '俗称“鸟巢”,是2008年北京奥运会的主体育场。',
image: '/static/logo.png',
name: '李四',
zhuang: '在线',
dian: '75',
wen: '36.5',
xinlv: '78',
xueyang: '98',
xueya: '120/80',
steps: '5600',
sleep: '良好'
}],
selectedMarker: {},
};
},
methods: {
markerTap(e) {
const markerId = e.detail.markerId; // 从事件对象中获取 markerId
this.debugInfo = `Marker ID: ${markerId}`;
const marker = this.markers.find(marker => marker.id === markerId);
if (marker) {
this.debugInfo += ` | Found marker: ${marker.title}`;
this.selectedMarker = marker; // 更新选中的标记点数据
} else {
this.debugInfo += ' | No marker found';
this.selectedMarker = {};
}
},
},
};
</script>
<style>
.content {
width: 100%;
height: 100vh;
position: relative;
}
.info-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.info-description {
font-size: 16px;
word-wrap: break-word;
overflow-wrap: break-word;
/* 保证在单词中间换行 */
}
.debug-info {
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
text-align: center;
}
.info-view {
border: 1px solid black;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>