高德地图安卓sdk，在uniapp中实现，地图上多个坐标点，点击坐标点，显示坐标信息

 

<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>