|
|
Linje 1: |
Linje 1: |
| var $stview=
| | src='http://maps.google.com/maps?file=api&v=2.144a&key=ABQIAAAA7ql29O9VDbgLgubWmd-3MxQo0wvHTbCLrb8-RKc86fsSML87NxTaSocVtwlKxoV8ejZHqNvYyCeMWg'; |
| {
| |
| iframeAddr : function (addr,width,height,dir)
| |
| {
| |
| var iframe="<iframe scrolling=no width="+width+" height="+height+" src='http://togosoft.com/web/streetview/getview.php?addr="+encodeURIComponent(addr)+"&width="+width+"&height="+height+"&dir="+dir+"'></iframe>";
| |
| return iframe;
| |
| },
| |
|
| |
|
| iframeLatLon : function (lat,lon,width,height,dir)
| | var map; |
| {
| | var streetviewClient; |
| var iframe="<iframe scrolling=no width="+width+" height="+height+" src='http://togosoft.com/web/streetview/getview.php?lat="+lat+"&lon="+lon+"&width="+width+"&height="+height+"&dir="+dir+"'></iframe>";
| | var panorama; |
| return iframe;
| | var centre = new GLatLng(25.774252,-80.190262); |
| },
| | var marker; |
|
| | |
| parse : function()
| | var vehicleOn = 0; |
| {
| | var vehicleSpeed = 0; |
| var objs=document.getElementsByTagName("*");
| | var vehicleBearing = 0; |
| for (i=0;i<objs.length;i++)
| | |
| {
| | function initMap() |
| if ((objs[i].className == "$stview") || (objs[i].className == "$stviewLatLon"))
| |
| {
| |
| var width=objs[i].getAttribute("width"); | |
| if (width == null || width == "") | |
| { | | { |
| width=320;
| | |
| | map = new GMap2(document.getElementById("mapDiv")); |
| | map.setCenter(centre,15); |
| | |
| | map.addControl(new GScaleControl()); |
| | map.addControl(new GMenuMapTypeControl()); |
| | map.addControl(new GLargeMapControl3D()); |
| | |
| | map.enableDoubleClickZoom(); |
| | map.enableContinuousZoom(); |
| | map.enableScrollWheelZoom(); |
| | |
| | |
| | // set up street view |
| | var streetOverlay = new GStreetviewOverlay(); |
| | map.addOverlay(streetOverlay); |
| | streetviewClient = new GStreetviewClient(); |
| | |
| | // Create Street View Marker |
| | var icon = new GIcon(); |
| | |
| | var imageNum = Math.round(vehicleBearing/22.5) % 16; |
| | var imageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + imageNum + ".png"; |
| | |
| | icon.image = imageUrl; |
| | icon.iconSize = new GSize(49,52); |
| | |
| | icon.printImage = icon.image; |
| | icon.mozPrintImage = icon.image; |
| | icon.iconAnchor = new GPoint(25,36); |
| | icon.infoWindowAnchor = new GPoint(25,6); |
| | |
| | marker = new GMarker(centre, {"icon":icon, "draggable":true}); |
| | map.addOverlay(marker); |
| | |
| | updateLocation(); |
| | |
| | |
| | GEvent.addListener(marker, "dragend", function() |
| | { |
| | var point = marker.getPoint(); |
| | streetviewClient.getNearestPanoramaLatLng(point, function (reply) |
| | { |
| | if (reply) |
| | { |
| | centre = reply; |
| | marker.setPoint(centre); |
| | map.setCenter(centre); |
| | |
| | panorama.setLocationAndPOV(centre, {yaw:vehicleBearing}); |
| | |
| | vehicleSpeed = -1; |
| | |
| | updateLocation(); |
| | } |
| | }); |
| | } |
| | ); |
| | |
| | GEvent.addListener(this.map, "click", function(streetOverlay,point) |
| | { |
| | if (point) |
| | { |
| | streetviewClient.getNearestPanoramaLatLng(point, function (reply) |
| | { |
| | if (reply) |
| | { |
| | centre = reply; |
| | marker.setPoint(centre); |
| | map.setCenter(centre); |
| | |
| | panorama.setLocationAndPOV(centre, {yaw:vehicleBearing}); |
| | |
| | vehicleSpeed = -1; |
| | |
| | updateLocation(); |
| | } |
| | }); |
| | |
| | } |
| | }); |
| | |
| | |
| | |
| | panorama = new GStreetviewPanorama(document.getElementById("streetDiv")); |
| | panorama.setLocationAndPOV(centre, {yaw:0}); |
| | |
| | GEvent.addListener(panorama,"initialized",function(a) |
| | { |
| | if (a && a.latlng) |
| | { |
| | marker.setPoint(a.latlng); |
| | map.setCenter(a.latlng); |
| | |
| | updateLocation(); |
| | } |
| | }); |
| | |
| | GEvent.addListener(panorama,"yawchanged",function(a) |
| | { |
| | if (a) |
| | { |
| | vehicleBearing = parseInt(a); |
| | |
| | // update marker image |
| | var imageNum = Math.round(vehicleBearing/22.5) % 16; |
| | var imageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + imageNum + ".png"; |
| | |
| | marker.setImage(imageUrl); |
| | |
| | } |
| | }); |
| | |
| | |
| | moveStart(); |
| | |
| | setTimeout("displayStats()", 1); |
| | } |
| | |
| | function resizeMap() |
| | { |
| | map.checkResize(); |
| | panorama.checkResize(); |
| } | | } |
| var height=objs[i].getAttribute("height"); | | |
| if (height == null || height == "") | | function updateLocation() |
| { | | { |
| height=240;
| | var point = marker.getPoint(); |
| | |
| | var stats = "lat: <b>" + point.lat() + "</b> lng: <b>" + point.lng() + "</b>"; |
| | document.getElementById("locDiv").innerHTML = stats; |
| } | | } |
| var dir=objs[i].getAttribute("dir"); | | |
| if (dir == null || dir == "") | | // turn left or right |
| | function turn(a) |
| { | | { |
| dir=0;
| | vehicleBearing += a; |
| | panorama.setPOV({yaw:vehicleBearing}); |
| | |
| | |
| | if (vehicleBearing < 0) |
| | { |
| | vehicleBearing += 360; |
| | } |
| | if (vehicleBearing > 360) |
| | { |
| | vehicleBearing -= 360; |
| | } |
| } | | } |
| var iframe=""; | | |
| if (objs[i].className == "$stview") | | function speed(a) |
| { | | { |
| iframe=this.iframeAddr(objs[i].innerHTML,width,height,dir);
| | if (a < 0) |
| | { |
| | // brake |
| | vehicleSpeed = -1; |
| | } |
| | else |
| | { |
| | // accel |
| | vehicleSpeed += a; |
| | |
| | // speed limit |
| | if (vehicleSpeed > 6) |
| | { |
| | vehicleSpeed = 6; |
| | } |
| | } |
| } | | } |
| else | | |
| | function restart() |
| { | | { |
| var latlon=objs[i].innerHTML.split(",");
| | panorama.setLocationAndPOV(centre, {yaw:270}); |
| iframe=this.iframeLatLon(latlon[0],latlon[1],width,height,dir);
| | |
|
| | vehicleSpeed = 0; |
| } | | } |
| objs[i].innerHTML=iframe; | | |
| }
| | function setFocus(a) |
| }
| | { |
| }
| | if (a.checked) |
| } | | { |
| | panorama.focus(); |
| | } |
| | else |
| | { |
| | panorama.blur(); |
| | } |
| | } |
| | |
| | |
| | function moveStart() |
| | { |
| | setTimeout("moveStage()", parseInt(3000 / vehicleSpeed)); |
| | } |
| | |
| | function moveStage() |
| | { |
| | // forward |
| | if (vehicleSpeed > 0) |
| | { |
| | panorama.followLink(vehicleBearing); |
| | } |
| | |
| | // break; |
| | if (vehicleSpeed < 0) |
| | { |
| | vehicleSpeed = 0; |
| | } |
| | |
| | setTimeout("moveStage()", parseInt(3000 / Math.abs(vehicleSpeed))); |
| | } |
| | |
| | // show speed and direction |
| | function displayStats() |
| | { |
| | var stats = ""; |
| | |
| | var pov = panorama.getPOV(); |
| | var displayBearing = parseInt(pov.yaw); |
| | if (displayBearing >= 360) |
| | { |
| | displayBearing -= 360; |
| | } |
| | if (displayBearing < 0) |
| | { |
| | displayBearing += 360; |
| | } |
| | |
| | if (displayBearing > 0) |
| | { |
| | } |
| | else |
| | { |
| | displayBearing = 0; |
| | } |
| | |
| | var displaySpeed = vehicleSpeed * 10; |
| | if (displaySpeed < 0) |
| | { |
| | displaySpeed = 0; |
| | } |
| | |
| | |
| | stats = |
| | "<span style='color:" + (vehicleSpeed >= 6 ? "red'" : "green") + "'>" + |
| | "Speed: <b>" + displaySpeed + "</b></span>" + |
| | "<br/>" + |
| | "Direction: <b>" + displayBearing + "°</b>"; |
| | |
| | document.getElementById("statDiv").innerHTML = stats; |
| | |
| | setTimeout("displayStats()", 500); |
| | } |
| | |
| | function chooseCity(a) |
| | { |
| | var cityID = parseInt(a.options[a.selectedIndex].value); |
| | |
| | // default is Miami |
| | var x = -80.190262; |
| | var y = 25.774252; |
| | var bearing = 0; |
| | |
| | switch (cityID) |
| | { |
| | case 1: // Albany, NY |
| | x =-73.755093; y=42.651725; break; |
| | case 2: // Boise, ID |
| | x=-116.282579; y=43.607478;bearing = 90; break; |
| | case 3: // Boston, MA |
| | x=-71.05682;y=42.35888; bearing = 90; break; |
| | case 4: // Chicago, IL |
| | x=-87.624333; y=41.879535; break; |
| | case 5: // Dallas, TX |
| | x=-96.797111; y=32.781078; break; |
| | case 6: // Detroit, MI |
| | x=-83.049452; y=42.334961; bearing=330; break; |
| | case 7: // Houston, TX |
| | x=-95.369503; y=29.7608; bearing = 305; break; |
| | case 8: // Indianapolis, IN |
| | x=-86.156255; y=39.767016; break; |
| | case 9: // Kansas City, MO |
| | x=-94.583653; y=39.090432; break; |
| | case 10: // Los Angeles, CA |
| | x=-118.243425; y=34.052187; break; |
| | case 11: // Manchester, NH |
| | x=-71.463079; y=42.990931; break; |
| | case 12: // Miami, FL |
| | x=-80.190262; y=25.774252; break; |
| | case 13: // Milwaukee, WI |
| | x=-87.91448; y=43.040182; break; |
| | case 14: // Minneapolis, MN |
| | x=-93.264351; y=44.977482; break; |
| | case 15: // New York, NY |
| | x=-73.985506; y=40.757929; break; |
| | case 16: // Orlando, FL |
| | x=-81.364438; y=28.553154; break; |
| | case 17: // Philadelphia, PA |
| | x=-75.163808; y=39.951639; break; |
| | case 18: // Phoenix, AZ |
| | x=-112.073821; y=33.448262; break; |
| | case 19: // Pittsburgh, PA |
| | x=-80.001983; y=40.438355; break; |
| | case 20: // Portland, OR |
| | x=-122.670132; y=45.523104; bearing = 268; break; |
| | case 21: // Providence, RI |
| | x=-71.408718; y=41.826956; bearing = 332; break; |
| | case 22: // Raleigh, NC |
| | x=-78.643414; y=35.779748; break; |
| | case 23: // Salt Lake City, UT |
| | x=-111.888189; y=40.771592; bearing = 180; break; |
| | case 24: // San Antonio, TX |
| | x=-98.493826; y=29.428515; bearing = 180; break; |
| | case 25: // San Diego, CA |
| | x=-117.163841; y=32.718834; bearing = 270; break; |
| | case 26: // San Francisco, CA |
| | x=-122.419204; y=37.775196; bearing = 345; break; |
| | case 27: // Tucson, AZ |
| | x=-110.943959; y=32.227832; bearing = 270; break; |
| | } |
| | |
| | // reset speed and bearing |
| | vehicleSpeed = -1; |
| | vehicleBearing = bearing; |
| | |
| | centre = new GLatLng(y,x); |
| | map.setCenter(centre,15); |
| | marker.setPoint(centre); |
| | panorama.setLocationAndPOV(centre, {yaw:bearing}); |
| | |
| | } |
| | |
| | function AddOnLoadHook () { |
| | window.onload = initMap |
| | window.onresize = resizeMap |
| | window.onunload=GUnload |
| | } |