Landkartenstatistik

T

Tiberius

0
Hallo,

ich bin neu hier und habe gesehen, dass man sich hier in eine Landkartenstatistik eintragen kann. Das hat mir gut gefallen und nun frage ich mich wie kann ich sowas selbst in eine Homepage einbauen?

Ich hab schonmal etwas gegoogelt, jedoch nichts passendes gefunden was mir weiter hilft.

Gruß

Tiberius
 
Obwohl ich persönlich nie damit gearbeitet habe, würde ich dir einen Blick in die Google Maps API Referenz werfen, denn ich denke, auf diese Weise würde sich ein solches Problem gut lösen lassen.
 
Bei Google Maps war ich schon, habe da bereits davon einen passenden Ausschnitt als Lageplan auf der Homepage. Wußte nicht dass es mit solchen Fähnchen auch geht.

Hatt gedacht es gibt da ein Snippet oder einen anderen Dienst den man dafür nutzen kann.

Vielleicht hat ja noch einer eine Idee.


Gruß

Tiberius
 
Tiberius hat gesagt.:
Bei Google Maps war ich schon, habe da bereits davon einen passenden Ausschnitt als Lageplan auf der Homepage. Wußte nicht dass es mit solchen Fähnchen auch geht.

Hatt gedacht es gibt da ein Snippet oder einen anderen Dienst den man dafür nutzen kann.
Zum Vergrößern anklicken....

Hä? Was hast du und was willst du? Ein Snippet. Na dann (wie ich bereits erwähnte) wirf einen Blick in die API!
Da gibts beispielsweise ein Tutorial. Es gibt sogar ein Beispiel mit Marker.

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Hello World!"
    });   
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Ist es denn nicht genau das, was du suchst?
 
Naja, das Einfügen von Markern in eine GoogleMap ist schon etwas komplexer als die simple Anzeige. Für die reine Anzeige empfehle ich übrigens Google Maps API Tutorial Da wird alles Schritt für Schritt erläutert inkl. dem Einfügen von HTML-Code, Style-Informationen usw..

Auch beim Einfügen muss natürlich GoogleMaps im Header der HTML-Datei geladen werden:

Code: 
<script src="http://maps.google.com/maps?file=api&v=2&key=deinmapkey" type="text/javascript"></script>

Einen Map-Key bekommt man unter Google Maps-API anfordern - GoogleÂ*MapsÂ*API-Familie - Google Code

Dann braucht man zum Einfügen natürlich ein Formular. Das könnte z.B. so aussehen:

Code: 
<form action="addmarker_submit.php" method="post">

<select id="precision" style="width:280px;" >
<OPTION selected ></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
</select><br />

Breitengrad: <input type="text" name="breitengrad" id="breitengrad" size="50" maxlength="20" /><br />
Laengengrad: <input type="text" name="laengengrad" id="laengengrad" size="50" maxlength="20" /><br />
Typ: <select name="typ" size="1">      
<option>Typ1</option>      
<option>Typ2</option>
</select><br />

<input type="submit" value="Absenden">
</form>

<div id="map" style="width:512px; height:400px"></div>
<script type="text/javascript"> 
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(50.84757295,9.71191406), 6);
var html = "<div style='width: 208px; height: 100px'>You can see that 'mousemove' event returns mouse coordinates even on marker or infowindow."
var marker = new GMarker(new GLatLng(60,25));
map.addOverlay(marker);
map.getDragObject().setDraggableCursor("crosshair");
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);});
var lastPoint;
GEvent.addListener(map, "mousemove", function(point){
var latLngStrF = point.lat().toFixed(14) + ', ' + point.lng().toFixed(14) ;
var latLngStr8 = point.lat().toFixed(8) + ', ' + point.lng().toFixed(8);
var latLngStr6 = point.lat().toFixed(6) + ', ' + point.lng().toFixed(6);
var latLngStr5 = point.lat().toFixed(5) + ', ' + point.lng().toFixed(5);
var latLngStr4 = point.lat().toFixed(4) + ', ' + point.lng().toFixed(4);
document.getElementById("precision").options[0].text = latLngStrF;
document.getElementById("precision").options[1].text = latLngStr8;
document.getElementById("precision").options[2].text = latLngStr6;
document.getElementById("precision").options[3].text = latLngStr5; 
document.getElementById("precision").options[4].text = latLngStr4;
lastPoint = point;
});
GEvent.addListener(map, "click", function(){
var latLatStr = lastPoint.lat().toFixed(14);document.getElementById("breitengrad").value = latLatStr;
var latLngStr = lastPoint.lng().toFixed(14);
document.getElementById("laengengrad").value = latLngStr;
});
//]]>
</script>


Damit solltest du grundlegend ein Formular mit 2 Eingabefeldern haben und einer Select-Box. Unter dem Formular wird eine Karte angezeigt, und wenn du irgendwo auf diese klickst, werden automatisch die Koordinaten in die Eingabefelder eingetragen. In der Select-Box werden die Koordinaten schon bei der Bewegung der Maus über der Karte angezeigt und man kann unterschiedliche Präzisionen auswählen. Weiterhin wird hier auch gleich ein Typ definiert, so dass man bei der Anzeige verschiedene Marker für verschiedene Ortstypen nutzen kann. Natürlich kann man das auch einfach mit versteckten Eingabefeldern (type=hidden) umsetzen, so dass der User die Koordinaten gar nicht erst zu Gesicht bekommt.

Nun musst du nur noch deine Marker-Tabelle in einer Datenbank mit dem als Action vermerkten Skript befüllen, in diesem Fall also addmarker_submit.php.

Das könnte dann im einfachsten Fall z.B. so aussehen:

Code: 
<?php
include 'config.php';
$config = new Config();
$db_host = $config->mysql_host;
$db_user = $config->mysql_user;
$db_pass = $config->mysql_pass;
$db_name = $config->mysql_name;
$tbl_name = 'markers';

$breitengrad = $_POST['breitengrad'];
$laengengrad = $_POST['laengengrad'];
$typ = $_POST['typ'];
$typ = strtolower($typ);

$breitengrad = mysql_real_escape_string($breitengrad);
$laengengrad = mysql_real_escape_string($laengengrad);

mysql_connect("$db_host", "$db_user", "$db_pass")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

$sql = "INSERT INTO `".$tbl_name."` (`lat`, `lng`) VALUES('".$breitengrad."', '".$laengengrad."')";
$result = mysql_query($sql);
?>

Hier fehlt natürlich noch die Input-Validierung, aber die wirst du ja hoffentlich allein hinbekommen.

Die Funktionalität zum Generieren der XML-Informationen für die Marker könnte z.B. so umgesetzt werden.

Code: 
<?php
include('config.php');
$config = new Config();
$host = $config->mysql_host;
$username = $config->mysql_user;
$password = $config->mysql_pass;
$database = $config->mysql_name;

$connection=mysql_connect ($host, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

echo '<markers>';

while($row = @mysql_fetch_assoc($result)) {
  echo '<marker ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

echo '</markers>';

?>

Der Code ist ungetestet und bedarf daher ggf. noch ein paar Anpassungen und IDs u.ä. müssen natürlich für die Anzeige beachtet werden.
 
Alternativ kannst du auch mal nach OpenStreetMaps googlen.. da braucht man dann keinen Key und kann sich auch problem los eine Karte anzeigen (die allerdings qualitativ, gemessen an der Genauigkeit und Vollständigkeit, nicht so gut ist).
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben