首页 > 其他分享 >高德地图安卓sdk,在uniapp中实现,地图上多个坐标点,点击坐标点,显示坐标信息

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

时间:2024-05-22 10:20:22浏览次数:24  
标签:uniapp title debugInfo 地图 坐标 selectedMarker marker font markerId

 

<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

相关文章

  • 自定义可移动点二维坐标轴控件
    自定义可移动点二维坐标轴控件目录路由参数坐标轴控件定义Demo路由参数X_YResultCollection为当前X轴对应Y轴值存储字典publicclassResultCollectionChangedEventArgs(RoutedEventroutedEvent,objectsource,IDictionary<double,double>resultCollection):Route......
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
    原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS。uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端......
  • 三维坐标转2维坐标
    最近在帮朋友调代码,他们想出份报告,需要把三维的坐标系以一定的角度画到纸面上。公式:x= x'Cosα+z'Cosβ   y=y'- z'Sinβ+ x'Cosα以下是公式推导过程1.先画平面直角坐标系(xy坐标系)和空间直角坐标系(xyz坐标系,本文用x',y',z'表示),x轴和x'轴之间的夹角为α,x轴......
  • 【地图导航有讲究】教你识别合法地图
    在这个数字化时代,地图已成为我们日常生活中不可或缺的导航工具。无论是纸质地图还是手机中的电子地图,准确合法的地图不仅能为我们指引方向,还关乎国家安全和社会秩序。那么,如何确保你手中的地图是合法的呢?今天,就让我们一起学习几个识别合法地图的小技巧。 了......
  • uniApp生成的h5页面禁止浏览器上缩放页面(支持安卓,ios)
    项目场景:uniapph5内嵌原生appios样式问题:1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.修改ios底部的安全距离的背景色,默认是白色问题描述1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.解决ios底部的安全距离和修改背景色,默认是白色解决方案:安卓只需要在h5.template.h......
  • 腾讯地图、百度地图和高德地图开发者使用体验比较
    摘要:本文将介绍腾讯地图、百度地图和高德地图在前端项目中的使用区别,重点分析了腾讯地图在项目中可能存在的一些缺点,并提供了相应的开发优化方案,以提升腾讯地图在项目中的使用体验。正文:在前端开发中,地图服务提供商扮演着至关重要的角色。腾讯地图、百度地图和高德地图是常用的......
  • 小白总结uniapp微信小程序跨域问题的解决(前端)
    小白总结uniapp微信小程序跨域问题的解决(前端):https://blog.csdn.net/m0_69848498/article/details/137628381?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AD%98%E5%9C%A8%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E5%90%97&utm_medium=......
  • 【uniapp 篇 】动态添加 表单,所添加元素展示在同一行
    动态添加表单,所添加元素展示在同一行1<uni-formslabelWidth="68px">23<uni-forms-itemv-for="(item,index)inbaseFormData.dynamicTable.timeField.array"4......
  • uniapp 文件管理器(文件选择)
    仅app//#ifdefAPP-PLUSexportfunctionopenFileManager(){returnnewPromise(async(resolve,reject)=>{try{awaitrequestPermission();//获取应用主Activity实例对象constmain=plus.android.runtimeMainActivity();//c......
  • 基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
    vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。如下图:H5+小程序+App端,多端......