我正在玩这个html5脚本，它现在加载了一个地球仪，你必须点击地球仪才能获取该位置，它会打开另一个站点，并在你点击的位置上显示地图。以下是全球网站的示例：
http://parameter-pollution.github.io/webgl-ingress/demo/index.html
您会看到当您点击地球时，它会打开包含您点击位置的其他网站。下面是使这一切成为现实的html代码。
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Ingress WebGL</title>
<meta charset="utf-8">
<style type="text/css">
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
border: 0;
overflow-y:hidden;
overflow-x:hidden;
height: 100%;
background-color: #000000;
}
#universe{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
.ada_wheel{
position:absolute;
top: 50%;
left: 50%;
height: 396px;
width: 396px;
margin-top: -198px;
margin-left: -198px;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#wheel_outer{
animation-name: rotateLeft;
-webkit-animation-name: rotateLeft;
}
@keyframes rotateLeft{
from { transform:rotate(360deg); }
to { transform:rotate(0deg); }
}
@-webkit-keyframes rotateLeft{
from { -webkit-transform:rotate(360deg); }
to { -webkit-transform:rotate(0deg); }
}
#wheel_inner{
animation-name: rotateRight;
-webkit-animation-name: rotateRight;
}
@keyframes rotateRight{
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
@-webkit-keyframes rotateRight{
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(360deg); }
}
#border_gradient{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
#click_notify{
position:absolute;
top:20%;
left:20%;
color: white;
font-size:2em;
display:none;
}
#webgl_error{
margin-top: 10%;
text-align: center;
color:white;
display:none;
}
</style>
<script type="text/javascript" src="/Detector.js"></script>
<script type="text/javascript" src="/three.js"></script>
<script type="text/javascript" src="/Tween.js"></script>
<script type="text/javascript" src="/myOrbit.js"></script>
<script type="text/javascript" src="/myHUD.js"></script>
<script type="text/javascript">
/*
@coder paremeter-pollution / https://github.com/parameter-pollution/
*/
//audio controls:
var sounds={};
var tweenStyle={};
tweenStyle.opacity=1;
var inner_wheel, outer_wheel, border_gradient, click_notify;
// standard global variables
var container, scene, camera, renderer, clock, controls, stats, projector;
// custom global variables
var middle_earth={x:0,y:0,z:0};
var orbit;
var earth;
var earth_radius=50;
var layers= new Array(10);
var layer_distance=0.005;
var hud;
var hud_distance=30;
var crosshairTrackingPoint;
var randomPointInterval;
var numberOfTextures=3;
function init()
{
if(!Detector.webgl){ //check for webgl support
document.getElementById('webgl_error').style.display="block";
return;
}
sounds.aquiring_position=document.getElementById('aquiring_position');
sounds.crosshair_locked=document.getElementById('crosshair_locked');
sounds.logon_established=document.getElementById('logon_established');
sounds.zoom_sound=document.getElementById('zoom_sound');
sounds.downloading_latest_intel_package=document.getElementById('downloading_latest_intel_package');
sounds.ambient_space=document.getElementById('ambient_space');
inner_wheel=document.getElementById('wheel_inner');
outer_wheel= document.getElementById('wheel_outer');
border_gradient= document.getElementById('border_gradient');
click_notify=document.getElementById('click_notify');
clock = new THREE.Clock();
scene = new THREE.Scene();
// set up camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 2000);
camera.up.set(0,0,1);
//HUD
hud = new myHUD(camera,hud_distance);
crosshairTrackingPoint=new THREE.Vector3(25,25,25);
//crosshair
var crosshairGeometry = new THREE.PlaneGeometry( 30, 30 );
var crosshairMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/crosshair.png', null, textureLoadComplete), transparent:true } );
crosshair = new THREE.Mesh(crosshairGeometry, crosshairMaterial);
hud.addTracked(crosshair, crosshairTrackingPoint);
//var ambientLight = new THREE.AmbientLight(0x101010,0.5);
//scene.add(ambientLight);
// spotlight
var spotlight = new THREE.SpotLight(0xffffff, 1.4);
spotlight.position.set(0,0,50);
spotlight.angle=Math.PI/6;
camera.add(spotlight);
/*
var spotlight2 = new THREE.SpotLight(0xffffff, 1.5, 40);
spotlight2.position.set(0,0,30);
spotlight2.exponent=0;
camera.add(spotlight2);
*/
// add the camera to the scene
scene.add(camera);
orbit=new myOrbit( camera, middle_earth, 500, clock );
// create renderer
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(window.innerWidth, window.innerHeight);
// render container
container = document.getElementById( 'universe' );
// attach renderer to the container div
container.appendChild( renderer.domElement );
// sphere parameters: radius, segments along width, segments along height
var earthGeometry = new THREE.SphereGeometry( earth_radius, 64, 32 );
var earthMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/borders.jpg', null, textureLoadComplete) } );
earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.rotation.set(Math.PI/2,0,0);
// layers
var layerMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture('img/layer.png', null, textureLoadComplete), transparent:true, opacity: 0.6 } );
//this function doesn't work when you start with adding layers with lower scale. but i have NO FUCKING IDEA why ^^
//if you decide to change it around and find yourself changing it back again increase this counter: 3
var scale=1+layer_distance*layers.length;
for (var i = 0; i < layers.length; i++) {
layers[i] = new THREE.Mesh(earthGeometry, layerMaterial);
layers[i].scale.set( scale, scale, scale );
earth.add(layers[i]);
scale -= layer_distance;
}
scene.add(earth);
renderer.initWebGLObjects( scene );
projector = new THREE.Projector();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function textureLoadComplete(){
numberOfTextures--;
if( numberOfTextures === 0 ){ //all textures have been loaded, let's get this party started ;-)
var delta=clock.getDelta();
if( delta < 3000 ){ //make sure people with google fiber can also appreciate the loading animation ;-)
setTimeout( function(){startAnimation()}, 3000-delta);
}else{
startAnimation();
}
}
}
function startAnimation(){
fadeOutLoading();
orbit.tween_to_orbit( { distance: 200}, 4000, TWEEN.Easing.Exponential.Out, function(){
playSound(sounds.aquiring_position);
setTimeout( function(){
playSound(sounds.logon_established);
}, 2000);
setTimeout( function(){click_notify.style.display="inline";}, 5000);
});
randomPointInterval = setInterval( generateRandomTrackingPoint , 2000);
//start render loop
animate();
}
function fadeOutLoading(){
var fadeOutTween=new TWEEN.Tween(tweenStyle).to( {opacity: 0}, 4000);
fadeOutTween.easing(TWEEN.Easing.Cubic.In);
fadeOutTween.onUpdate(function(){
inner_wheel.style.opacity=tweenStyle.opacity;
outer_wheel.style.opacity=tweenStyle.opacity;
});
fadeOutTween.onComplete(function(){
inner_wheel.style.display="none";
outer_wheel.style.display="none";
});
fadeOutTween.start();
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
TWEEN.update();
orbit.update();
hud.update();
renderer.clear();
renderer.render( scene, orbit.camera );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObject( earth );
if ( intersects.length > 0 ) { //bazinga, we found an intersection point
orbit.fixAzimuth();
orbit.autoRotate=false;
window.clearInterval(randomPointInterval);
randomPointInterval=null;
hud.updateTrackingPoint( new THREE.Vector3(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) );
var spherical=orbit.convertCartesionToSpherical( intersects[0].point );
console.log("--lat------------long------");
console.log(spherical.inclination,spherical.azimuth);
var latitude=((spherical.inclination*180/Math.PI)-90)*(-1);
var longitude=spherical.azimuth*180/Math.PI;
if( longitude > 180 ){ longitude-=360 }
console.log(latitude,longitude);
// http://www.ingress.com/intel?ll=LA.ITUDE,LO.NGITUDE&z=9
//http://www.ingress.com/intel?ll=48.729699,15.205459&z=20
playSound(sounds.zoom_sound);
playSound(sounds.downloading_latest_intel_package);
click_notify.style.display="none"
border_gradient.style.display="none";
orbit.tween_to_orbit(spherical, 3000, TWEEN.Easing.Cubic.InOut, function(){
window.location.href="http://www.ingress.com/intel?ll="+latitude+","+longitude+"&z=6";
/*orbit.reset();
hud.updateTrackingPoint(new THREE.Vector3(0,0,0));
if( randomPointInterval === null ) { randomPointInterval = setInterval( generateRandomTrackingPoint , 2000); };
//TODO: this timeout should not be necessary
setTimeout( function(){
border_gradient.style.display="inline";
orbit.tween_to_orbit( { distance: 200}, 3000, TWEEN.Easing.Exponential.Out, function(){
playSound(sounds.aquiring_position);
setTimeout( function(){
playSound(sounds.logon_established);
}, 2000);
});
}, 50);*/
});
}
}
function onWindowResize( event ) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function generateRandomTrackingPoint(){
var min_azimuth=orbit.spherical.azimuth-0.5;
var max_azimuth=min_azimuth+Math.PI/2;
var spherical={};
spherical.azimuth = getRandomNumber(min_azimuth,max_azimuth);
spherical.inclination = getRandomNumber( 0.4, Math.PI-0.4 );
spherical.distance = earth_radius;
playSound(crosshair_locked);
var point=orbit.convertSphericalToCartesian(spherical);
hud.updateTrackingPoint(new THREE.Vector3(point.x, point.y, point.z));
}
function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function playSound(sound){
var newAudio=new Audio(sound.src);
newAudio.play();
}
//chrome audio loop stops working randomly. this ugly hack fixes it
function ambient_loop_hack(){
setTimeout(function(){
playSound(sounds.ambient_space);
ambient_loop_hack();
}, 5601 );
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
<img class="ada_wheel" id="wheel_outer" src="img/ada_wheel_outer.png">
<img class="ada_wheel" id="wheel_inner" src="img/ada_wheel_inner.png">
<img id="border_gradient" src="img/border_gradient.png">
<div id="click_notify">click somewhere on the planet!</div>
<div id="webgl_error">Sorry, your graphics card and/or webbrowser don't support WebGL!</div>
<div id="universe"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42384097-1', 'github.com');
ga('send', 'pageview');
</script>
<body onload="getLocation()">
我已尝试使用此示例获取当前位置：
http://www.w3schools.com/html/html5_geolocation.asp
并使用此示例在加载时加载函数：
http://html5hive.org/javascript-beginners-tutorial/
有没有什么方法可以让它在加载地球的地方工作，抓住地点，然后打开另一个地点，地图就在它从地球上抓取的当前位置？所有这一切都无需点击地球。
这是我运行以获取当前用户位置协调员的脚本：
<body onload="getLocation()">
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
答案 0 :(得分：1)
这是获取用户位置的代码，然后使用正确的参数重定向到Ingress站点：
<button onclick="getLoc()">GET LOCATION</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(redirectMe);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function redirectMe(position) {
document.location.href="https://www.ingress.com/intel?ll="+position.coords.latitude+","+position.coords.longitude+"&z=6";
}
</script>
这：position.coords.longitude和position.coords.latitude是由navigator.geolocation函数创建的变量。然后你在第二个函数中调用它们。 document.location.href重定向到您指定的网址。