<template> <view class="content"> <map id="map" :style="{ width: '100%', height: '50vh' }" :markers="markers" :longitude="longitude" :latitude="latitude" :scale="scale" @markertap="markerTap"></map> <view class="info-view" v-if="selectedMarker.title"> <view class="info-title">{{ selectedMarker.title }}</view> <view class="info-description">{{ selectedMarker.description }}</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: '这是中国北京的中心地标之一。' }, { id: 1, longitude: 116.402854, // 经度值:北京国家体育场 latitude: 39.99285, // 纬度值:北京国家体育场 iconPath: '/static/logo/58x58.png', width: 50, height: 50, title: '北京国家体育场', description: '俗称“鸟巢”,是2008年北京奥运会的主体育场。' }], 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; } .popup-info { padding: 20px; z-index: 1000; /* 确保这个值高于其他内容 */ position: relative; /* z-index 需要一个定位上下文 */ } .popup-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .popup-description { font-size: 16px; } .info-view { padding: 20px; background-color: #fff; /* 白色背景 */ border-top: 1px solid #ccc; /* 上边框 */ box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */ } .info-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .info-description { font-size: 16px; } .debug-info { /* position: absolute; bottom: 0; left: 0; */ /* width: 100%; */ background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; text-align: center; } </style>
标签:uniapp,title,debugInfo,地图,坐标,selectedMarker,marker,font,markerId From: https://www.cnblogs.com/le-cheng/p/18205628