Her skal der vises et Google Maps-kort!

I Web2.0-arkitekturen kaldes denne teknik for mashup. Data, billeder, lyd og andet multimedieindhold kan bruges på din egen hjemmeside ved hjælp af åbne API-programmeringsgrænseflader.

Et klassisk eksempel på denne teknologi er Google Maps. Google Maps’ API gør det muligt at inkorporere gadekort og satellitbilleder fra ethvert sted på din egen side. Desuden kan måleværdier flettes ind i disse kort.

Det følgende eksempel illustrerer i detaljer, hvordan temperaturen målt af en web-termograf indarbejdes i et Google Map.

Har du ikke et webtermometer, men vil gerne afprøve dette eksempel?Intet problem: Vi giver dig et Web Thermometer NTC, som du kan afprøve gratis i 30 dage. Udfyld blot bestillingsformularen, så sender vi webtermografen til dig på en åben faktura. Hvis du returnerer enheden inden for 30 dage, krediterer vi fakturaen fuldt ud.
For at prøve ordrer

Forberedelser

Du har allerede angivet din web-termograf

1. HTML underliggende struktur af websiden

  • For nemheds skyld vil webstedet i dette eksempel kun indeholde kortsektionen og temperaturoverlayet som indhold. Der oprettes et Div-lag i body-området på siden med ID-kortet. Dette ID kan bruges til at fylde indholdet i Div-Layer med Google Maps-kortdata, når websiden er åbnet.
<html>
	<head>
		<title>Temperature in Map Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>

	<body onload="load();">
		<div id="map" style="width:640px; height:400px;"></div>
	</body>
</html>

2. Brug af Google Maps-tjenesterne

  • En grundlæggende forudsætning for at bruge Google Maps-tjenesterne er registrering hos Google. Webdomænet, hvor kortmaterialet skal vises, skal være registreret (i vores tilfælde f.eks. www.WuT.de). Tilmeld dig via følgende link: https://developers.google.com/maps/.

    Til gengæld får du en adgangsnøgle, som gør Google API tilgængelig ved hjælp af et tilsvarende script.

.....
</head>
<script src="http://maps.google.com/?file=api
&amp;ie=iso-8859-1
&amp;oe=iso-8859-1&amp;v=2.x
&amp;key=Registrierungsschlüssel"
type="text/javascript">
</script>
<body onload="load();">
.....

3. PHP-scriptet til at hente temperaturen fra Web-Thermographs

Det script, der vises her, skal som sin egen PHP-fil kunne kaldes på den samme PHP-server, som webstedet indlæses fra. Den er universelt opbygget og kan bruges til kommunikation med både Web-Thermographs og Web-IOs. Scriptet åbnes efter behov fra browseren ved hjælp af en AJAX-anmodning. URL’en bruges til at overføre alle de nødvendige parametre.

  • IP:
    Web-IO’s IP-adresse
  • PORT:
    Web-IO’s TCP-port (normalt 80)
  • KOMMANDO:
    Mulige kommandoer for webtermografer er: enkelt, hvor sensornummeret kan følge den faktiske kommando

    Mulige kommandoer for Web-IO Digital er: output, input eller counter, hvor input- eller outputnummeret kan følge den aktuelle kommando. Web-IO returnerer status for indgangene eller udgangene.

    Som en ekstra kommando kan udgangene indstilles ved hjælp af outputaccess

  • PW:
    Administrator- eller operatøradgangskode til Web-IO (kun Web-IO Digital)
  • MASK:
    Angiver i hexadecimalt format, hvilke udgange der skal indstilles (kun Web-IO Digital for udgangsadgang)
  • STATE:
    Angiver i hex-format, hvilken tilstand udgangene skal indstilles til (kun Web-IO Digital for outputaccess)

Opkaldet til temperaturforespørgslen ville så se ud som følger:
webiorequest.php?IP=URL des Web-Thermographen&PORT=80&COMMAND=single&

Som svar returnerer scriptet IP-adressen, enhedens navn og den aktuelle temperatur, adskilt af semikolon.
10.40.23.100;WEBIO-03A481;6,8°C

PHP-scriptet har følgende struktur:

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
	parse_str($_SERVER['QUERY_STRING']);
	$fp=fsockopen($IP, $PORT, $errno, $error, 5);
	if (!$fp)
		{
		printf("ERROR");
		}
	else
		{
		if ($COMMAND == "outputaccess")
			{
			IF ($MASK == "")
				{
				$MASK="0FFF";
				}
			fputs($fp, "GET /".$COMMAND."?PW=".$PW."&Mask=".$MASK."&State=".$STATE."&");
			}
		else
			{
			fputs($fp, "GET /".$COMMAND."?PW=".$PW."&");
			}
		do
			{
			$char=fgetc($fp);
			if($char!=chr(0))
				{
				echo $char;
				}
			}
		while($char!=chr(0));
		fclose($fp);
		}
?>

Dette script gemmes på serveren under webiorequest.php.

4. Kombination og visning af temperatur- og kortdata

  • Opkald til de nødvendige temperatur- og kortdata styres af et JavaScript ved hjælp af AJAX.

    Indlæsning af webstedet kalder Load-funktionen ved hjælp af en tilsvarende instruktion i body-tagget. Load-kommandoen starter på sin side DataRequest-funktionen og overfører den kommandostreng, der er nødvendig for at kalde temperaturen.

    DataRequest-funktionen tjekker først, hvilken browser der bruges, så den korrekte metode til HTTPRequest kan bruges (her er der forskel på, om browserne er kompatible med Internet Explorer eller Firefox).

    Brug det PHP-script, der er beskrevet i trin 3. Den aktuelle temperatur bliver derefter spurgt. Når svaret modtages, aktiveres den indlejrede DataReceived-funktion automatisk.

    Temperaturværdien klippes ud af den modtagne streng og gemmes sammen med det aktuelle tidspunkt på dagen i en ny streng.

    Først nu bliver kortet genereret. Til dette formål indstilles det tilsvarende koordinatpar for den ønskede placering i punktvariablen, og det ønskede kort indsættes i det medfølgende Div-Layer.

    Kortets udseende kan specificeres ved hjælp af forskellige parametre (kort eller satellitbillede, navigationselement, …).

    Til sidst placeres en markør på det ønskede punkt, og strengen med temperatur og tidspunkt på dagen overlejres på kortet.

<script type="text/javascript">
var map;
var point;
var marker;
var commandstring ='webiorequest.php?IP=klima.wut.de&PORT=80&COMMAND=single&';

function load()
	{
	DataRequest(commandstring);
	}

function DataRequest(SendString)
	{
	var xmlHttp;
	try
	{ // Internet Explorer
	if( window.ActiveXObject )
		{
		xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP");
		}
	// Mozilla, Opera und Safari
	else if(window.XMLHttpRequest )
		{
		xmlHttp = new XMLHttpRequest();
		}
	}
	// loading of xmlhttp object failed
	catch( excNotLoadable )
		{
		xmlHttp = false;
		alert("no knowen browser");
		}
	if (xmlHttp)
		{
		xmlHttp.onreadystatechange = DataReceived;
		xmlHttp.open("GET", SendString, true);
		xmlHttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
		xmlHttp.setRequestHeader("Expires", "Sat, 05 Nov 2005 00:00:00 GMT");
		xmlHttp.setRequestHeader("Pragma","no-cache");
		xmlHttp.send(null);
		}
	function DataReceived()
		{
		var Timenow = new Date();
		if (xmlHttp.readyState == 4)
			{
			if (xmlHttp.status == 200)
				{
				var receivestring = xmlHttp.responseText;
				var receivestringpart = receivestring.split(';');
				receivestring = 'Außentemperatur um ' + Timenow.getHours() + ':'
					+ Timenow.getMinutes() + ' Uhr ' + receivestringpart[2].substring(0,receivestringpart[2].length-2) + '°C';
				if( GBrowserIsCompatible())
					{
					point = new GLatLng( 51.305099, 7.254627 );
						map = new GMap2( document.getElementById( 'map' ) );
						map.addControl( new GSmallMapControl() );
						map.setCenter( point, 18 );
						map.setMapType(G_SATELLITE_MAP)
						marker = new GMarker(point);
						map.addOverlay(marker);
						var content = "<h3>Prima Klima bei W&T</h3>";
						content += "<br><a href='http://klima.wut.de'>" + receivestring + "</a>";
						marker.openInfoWindowHtml(content);
					}
				}
			}
		}
	}
	</script>

Dette eksempel understøtter med vilje kun nogle få grundlæggende mashup-funktioner og er optimeret til modellerne 57714 og 57715 af Web Thermometer. For de andre Web-IO-modeller kan det være nødvendigt at foretage nogle tilpasninger. Google Maps API tilbyder også mange ekstra funktioner, som ikke blev brugt her.

Bemærk, at i det eksempel, der tilbydes her til download, skal registreringsnøglen, der matcher domænet, indtastes.

Download programeksempel

Har du ikke et webtermometer, men vil gerne afprøve dette eksempel?

Intet problem: Vi giver dig et webtermometer, som du kan afprøve gratis i 30 dage.

Bestil en prøveversion eller køb en version her:

Kom i gang - bestil en prøveversion i 30 dage.

Prøv vores produkter fra Wiesemann & Theis gratis i 30 dage ved at skrive det i ordrebekræftelsen: Ønsker at teste produktet.
Hvis du ikke ønsker at gøre brug af din returret inden for 30 dage, skal du blot betale den medfølgende faktura. Gratis forsendelse i Danmark.