uni-app 获取@anchorpointtap 位置信息

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 获取@anchorpointtap 位置信息

各位大仙，本人想做一个导航电子狗，需要向百度地图一样实时跟随位置，但是uniapp 中只能用getLocation来获取当前位置，但是有误差，间隔时间也很大，无法准确实时定位，但是我发现开启带箭头图标是实时准确变动的，请帮忙看下map地图如何监听获取[@anchorpointtap](/user/anchorpointtap)的实时位置变化坐标，感谢了！

信息类别 信息内容
开发环境 uniapp
版本号 未提及
项目创建方式 未提及

Harmonyos Next教程
2 回复

智密科技，专注于uniapp生态开发，拥有专职前端、安卓工程师、IOS工程师、硬件工程师、后端工程师、UI设计人员，提供Unaipp插件开发，app外包开发 开发过很多地图类插件应用 只要地图SDK支持的 基本都能实现 联系微信 zhimitec


在uni-app中，@anchorpointtap 通常与富文本组件（如 rich-text）一起使用，用于监听点击富文本中锚点（anchor）标签的事件。当用户点击某个锚点时，可以获取该锚点的位置信息。然而，uni-app 的官方文档中并没有直接提到 @anchorpointtap 事件，但你可以通过自定义的方式实现类似的功能。

以下是一个通过 rich-text 组件和点击事件处理来获取锚点位置信息的示例代码：

  1. 定义富文本数据：
data() {
    return {
        htmlContent: [
            {
                name: 'div',
                attrs: {
                    class: 'content',
                    style: 'line-height: 2em;'
                },
                children: [
                    {
                        type: 'text',
                        text: 'This is a text with an anchor: '
                    },
                    {
                        name: 'a',
                        attrs: {
                            href: '#',
                            id: 'anchor1',
                            class: 'anchor'
                        },
                        children: [
                            {
                                type: 'text',
                                text: 'Click here'
                            }
                        ]
                    }
                ]
            }
        ]
    };
}
  1. 模板中使用 rich-text 组件：
<template>
    <view>
        <rich-text :nodes="htmlContent" @click="handleRichTextClick"></rich-text>
    </view>
</template>
  1. 处理点击事件：
methods: {
    handleRichTextClick(event) {
        const target = event.target;
        if (target.id && target.id.startsWith('anchor')) {
            // 获取锚点ID
            const anchorId = target.id;
            // 你可以在这里添加逻辑来处理锚点点击事件，比如滚动到锚点位置
            console.log('Anchor clicked:', anchorId);

            // 示例：滚动到锚点位置（需要额外实现滚动逻辑）
            // this.scrollToAnchor(anchorId);
        }
    },
    // 示例滚动函数（需要根据实际情况实现）
    scrollToAnchor(anchorId) {
        // 实现滚动到指定锚点的逻辑
        console.log('Scroll to anchor:', anchorId);
    }
}

注意：rich-text 组件的 @click 事件可能无法直接获取到精确的锚点位置信息（如页面坐标），因此你需要根据实际需求进行额外的处理，比如通过锚点的ID来获取其在页面中的位置，并实现滚动逻辑。此外，如果富文本内容非常复杂，可能需要使用更复杂的解析和处理逻辑来精确定位锚点。

以上代码提供了一个基本的框架，你可以根据实际需求进行扩展和优化。

回到顶部