Skip to content

A
AR.js

cqiang1993 / AR.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

体验新版 GitCode，发现更多精彩内容 >>

提交 e646aa0b 编写于 作者: N Nicolò Carpignoli 提交者： GitHub
浏览文件
操作

Merge pull request #617 from jeromeetienne/statically-places-enhancements 

Fix load static load of places
上级 28f0d6ec bc0d3735
隐藏空白更改
内联 并排
Showing with 192 addition and 123 deletion
aframe/examples/click-places/places.js
浏览文件 @ e646aa0b
const loadPlaces = function(coords) { window.onload = () => {
// COMMENT FOLLOWING LINE IF YOU WANT TO USE STATIC DATA AND ADD COORDINATES IN THE FOLLOWING 'PLACES' ARRAY let method = 'dynamic';
const method = 'api';
// if you want to statically add places, de-comment following line
// method = 'static';
if (method === 'static') {
// setTimeout is a temporary fix
setTimeout(() => {
let places = staticLoadPlaces();
renderPlaces(places);
}, 3000);
}
if (method !== 'static') {
// first get current user location
return navigator.geolocation.getCurrentPosition(function (position) {
// than use it to load from remote APIs some places nearby
dynamicLoadPlaces(position.coords)
.then((places) => {
renderPlaces(places);
})
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
}
};
const PLACES = [ function staticLoadPlaces() {
return [
{ {
name: "Your place name", name: "Your place name",
location: { location: {
lat: 0, // add here latitude if using static data lat: 0, // add here latitude if using static data
lng: 0, // add here longitude if using static data lng: 0, // add here longitude if using static data
} }
}, },
{
name: 'Another place name',
location: {
lat: 0,
lng: 0,
}
}
]; ];
}
if (method === 'api') {
return loadPlaceFromAPIs(coords);
}
return Promise.resolve(PLACES);
};
// getting places from REST APIs // getting places from REST APIs
function loadPlaceFromAPIs(position) { function dynamicLoadPlaces(position) {
const params = { let params = {
radius: 300, // search places not farther than this value (in meters) radius: 300, // search places not farther than this value (in meters)
clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ', clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ',
clientSecret: '', clientSecret: '',
...@@ -30,10 +62,10 @@ function loadPlaceFromAPIs(position) { ...@@ -30,10 +62,10 @@ function loadPlaceFromAPIs(position) {
}; };
// CORS Proxy to avoid CORS problems // CORS Proxy to avoid CORS problems
const corsProxy = 'https://cors-anywhere.herokuapp.com/'; let corsProxy = 'https://cors-anywhere.herokuapp.com/';
// Foursquare API // Foursquare API
const endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin let endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin
&ll=${position.latitude},${position.longitude} &ll=${position.latitude},${position.longitude}
&radius=${params.radius} &radius=${params.radius}
&client_id=${params.clientId} &client_id=${params.clientId}
...@@ -52,64 +84,83 @@ function loadPlaceFromAPIs(position) { ...@@ -52,64 +84,83 @@ function loadPlaceFromAPIs(position) {
}) })
}; };
function renderPlaces(places) {
let scene = document.querySelector('a-scene');
places.forEach((place) => {
const latitude = place.location.lat;
const longitude = place.location.lng;
// add place icon
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');
// for debug purposes, just show in a bigger scale, otherwise I have to personally go on places...
icon.setAttribute('scale', '20, 20');
icon.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')));
const clickListener = function (ev) {
ev.stopPropagation();
ev.preventDefault();
const name = ev.target.getAttribute('name');
const el = ev.detail.intersection && ev.detail.intersection.object.el;
if (el && el === ev.target) {
const label = document.createElement('span');
const container = document.createElement('div');
container.setAttribute('id', 'place-label');
label.innerText = name;
container.appendChild(label);
document.body.appendChild(container);
setTimeout(() => {
container.parentElement.removeChild(container);
}, 1500);
}
};
icon.addEventListener('click', clickListener);
scene.appendChild(icon);
});
}
window.onload = () => { window.onload = () => {
const scene = document.querySelector('a-scene'); let method = 'dynamic';
// first get current user location // if you want to statically add places, de-comment following line
return navigator.geolocation.getCurrentPosition(function (position) { method = 'static';
// then use it to load from remote APIs some places nearby if (method === 'static') {
loadPlaces(position.coords) // setTimeout is a temporary fix
.then((places) => { setTimeout(() => {
places.forEach((place) => { let places = staticLoadPlaces();
const latitude = place.location.lat; renderPlaces(places);
const longitude = place.location.lng; }, 3000);
}
// add place icon
const icon = document.createElement('a-image'); if (method !== 'static') {
icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
icon.setAttribute('name', place.name); // first get current user location
icon.setAttribute('src', '../assets/map-marker.png'); return navigator.geolocation.getCurrentPosition(function (position) {
// for debug purposes, just show in a bigger scale, otherwise I have to personally go on places... // than use it to load from remote APIs some places nearby
icon.setAttribute('scale', '20, 20'); dynamicLoadPlaces(position.coords)
.then((places) => {
icon.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))); renderPlaces(places);
})
const clickListener = function(ev) { },
ev.stopPropagation(); (err) => console.error('Error in retrieving position', err),
ev.preventDefault(); {
enableHighAccuracy: true,
const name = ev.target.getAttribute('name'); maximumAge: 0,
timeout: 27000,
const el = ev.detail.intersection && ev.detail.intersection.object.el; }
);
if (el && el === ev.target) { }
const label = document.createElement('span');
const container = document.createElement('div');
container.setAttribute('id', 'place-label');
label.innerText = name;
container.appendChild(label);
document.body.appendChild(container);
setTimeout(() => {
container.parentElement.removeChild(container);
}, 1500);
}
};
icon.addEventListener('click', clickListener);
scene.appendChild(icon);
});
})
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
}; };
aframe/examples/places-name/places.js
浏览文件 @ e646aa0b
const loadPlaces = function (coords) {
// COMMENT FOLLOWING LINE IF YOU WANT TO USE STATIC DATA AND ADD COORDINATES IN THE FOLLOWING 'PLACES' ARRAY
const method = 'api';
const PLACES = [ window.onload = () => {
let method = 'dynamic';
// if you want to statically add places, de-comment following line
// method = 'static';
if (method === 'static') {
// setTimeout is a temporary fix
setTimeout(() => {
let places = staticLoadPlaces();
renderPlaces(places);
}, 3000);
}
if (method !== 'static') {
// first get current user location
return navigator.geolocation.getCurrentPosition(function (position) {
// than use it to load from remote APIs some places nearby
dynamicLoadPlaces(position.coords)
.then((places) => {
renderPlaces(places);
})
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
}
};
function staticLoadPlaces() {
return [
{ {
name: "Your place name", name: "Your place name",
location: { location: {
...@@ -10,29 +43,30 @@ const loadPlaces = function (coords) { ...@@ -10,29 +43,30 @@ const loadPlaces = function (coords) {
lng: 0, // add here longitude if using static data lng: 0, // add here longitude if using static data
} }
}, },
{
name: 'Another place name',
location: {
lat: 0,
lng: 0,
}
}
]; ];
}
if (method === 'api') {
return loadPlaceFromAPIs(coords);
}
return Promise.resolve(PLACES);
};
// getting places from REST APIs // getting places from REST APIs
function loadPlaceFromAPIs(position) { function dynamicLoadPlaces(position) {
const params = { let params = {
radius: 300, // search places not farther than this value (in meters) radius: 300, // search places not farther than this value (in meters)
clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ', clientId: 'HZIJGI4COHQ4AI45QXKCDFJWFJ1SFHYDFCCWKPIJDWHLVQVZ',
clientSecret: '2VBFT2H3OWI03RY5TDIMANCX4ATUTRYSXWZJHUVYGRWEZQ24', clientSecret: '',
version: '20300101', // foursquare versioning, required but unuseful for this demo version: '20300101', // foursquare versioning, required but unuseful for this demo
}; };
// CORS Proxy to avoid CORS problems // CORS Proxy to avoid CORS problems
const corsProxy = 'https://cors-anywhere.herokuapp.com/'; let corsProxy = 'https://cors-anywhere.herokuapp.com/';
// Foursquare API // Foursquare API
const endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin let endpoint = `${corsProxy}https://api.foursquare.com/v2/venues/search?intent=checkin
&ll=${position.latitude},${position.longitude} &ll=${position.latitude},${position.longitude}
&radius=${params.radius} &radius=${params.radius}
&client_id=${params.clientId} &client_id=${params.clientId}
...@@ -51,40 +85,24 @@ function loadPlaceFromAPIs(position) { ...@@ -51,40 +85,24 @@ function loadPlaceFromAPIs(position) {
}) })
}; };
function renderPlaces(places) {
let scene = document.querySelector('a-scene');
window.onload = () => { places.forEach((place) => {
const scene = document.querySelector('a-scene'); let latitude = place.location.lat;
let longitude = place.location.lng;
// first get current user location
return navigator.geolocation.getCurrentPosition(function (position) {
// than use it to load from remote APIs some places nearby
loadPlaces(position.coords)
.then((places) => {
places.forEach((place) => {
const latitude = place.location.lat;
const longitude = place.location.lng;
// add place name // add place name
const text = document.createElement('a-link'); let text = document.createElement('a-link');
text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`); text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
text.setAttribute('title', place.name); text.setAttribute('title', place.name);
text.setAttribute('href', 'http://www.example.com/'); text.setAttribute('href', 'http://www.example.com/');
text.setAttribute('scale', '20 20 20'); text.setAttribute('scale', '20 20 20');
text.addEventListener('loaded', () => { text.addEventListener('loaded', () => {
window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')) window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
}); });
scene.appendChild(text); scene.appendChild(text);
}); });
}) }
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或