时间戳

首页 > 解决方案 > 如何将自定义图标添加到地名 AR.JS

ar.js - 如何将自定义图标添加到地名 AR.JS

问题描述

PNG image我们如何在库中将 Place 图标替换为 a AR.js？我已经阅读了这篇文章，我认为我们可以使用 aPNG image来显示为地点图标，但我们不能用地名来做到这一点。

根据文章，这就是我们显示地点名称并使用其默认图标的方式。

// add place name
                    const text = document.createElement('a-link');
                    text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
                    text.setAttribute('title', place.name);
                    text.setAttribute('href', 'http://www.example.com/');
                    text.setAttribute('scale', '13 13 13');

                    text.addEventListener('loaded', () => {
                        window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
                    });

这就是我们使用自定义图像的方式。

 const icon = document.createElement('a-image');
                    icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
                    icon.setAttribute('name', place.name);
                    icon.setAttribute('src', '../assets/map-marker.png');

标签： ar.js

解决方案

属性 gps-entity-place 是只读的。这意味着您不能使用 setAttribute 来修改它。

所以我之前的回答并没有完全回答这个问题。深入研究 AFrame 文档，我发现可以使用新实体生成 gps-projected-entity-place。但是，它需要在这里完成：https ://ar-js-org.github.io/AR.js-Docs/location-based-tutorial/#introducing-javascript-with-arjs

这意味着你应该这样做： text.setAttribute('gps-projected-entity-place', { latitude: ${latitude}, longitude: ${longitude} });

推荐阅读