如何将自定义图标添加到地名 AR.JS答案

【问题标题】：How do I add custom icon to Place Name AR.JS如何将自定义图标添加到地名 AR.JS
【发布时间】：2020-12-16 09:36:07
【问题描述】：

我们如何在AR.js 库中将 Place 图标替换为 PNG image？我已经阅读了这篇文章，我认为我们可以使用PNG 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

【解决方案1】：

~~属性 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} });

【讨论】：