Google Maps API v3 Tutorial Geofencing (Rechteck zeichnen)

Ich arbeite gerade mit der Google Maps API v3 und brauchte eine Funktion, welche den Benutzer einen gewissen Bereich auswählen lässt. Auch Geofencing genannt, vielleicht gibt es dazu mal ein erweitertes Geofencing Tutorial inklusive Erkennung und Datenbankanbindung. Aber jetzt zu der relativ einfachen Funktion. Also hier die kurze Vorgabe:

Der Benutzer klickt auf die Map, anschließend wird ein Rechteck von diesem Punkt zur aktuellen Mausposition angezeigt. So lange bis der Benutzer wieder auf die Map klickt und somit den Bereich ausgewählt hat. Anschließend werden noch die jeweiligen Ecken des Rechteckes ausgegeben, wodurch jeder die Daten einfach verarbeiten können sollte.

Ihr könnt das Beispiel 1 zu 1 übernehmen, verwenden, umbauen von mir aus auch verkaufen :). Ich würde mich aber freuen, wenn ihr einen Link hier her setzen würdet oder einfach nur einen kurzen Tweet oder was ähnliches macht. Natürlich interessiert mich auch für was ihr es eingesetzt habt. Schreibt einfach in die Kommentare.

Natürlich auch gerne Anregungen, aber bitte beachtet, dass ich euch nicht einfach so euren Code erstellen kann, auch ich habe begrenzte Zeit.

Hier kannst du das Beispiel ausprobieren.

Hier das ganze als Text Datei.

Hier ist der zerschossene Code von WordPress:

<html>
<head>
<!–Google Maps JavaScript einbinden–>
<script src=“http://maps.google.com/maps/api/js?sensor=false“ type=“text/javascript“></script>
<script type=“text/javascript“>
var bounds;
var startPoint;
var map;
var rectangle;

//Init von Google Maps
function init(){
var latlng = new google.maps.LatLng(48, 14);
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeControl: true,
zoom: 6,
center: latlng
};
map = new google.maps.Map(document.getElementById(„map_canvas“), myOptions);

//Eventlistener für Klicks
google.maps.event.addListener(map, ‚click‘, function(event) {
drawRect(event.latLng);
});
}

function drawRect(latLng){
if(startPoint==null){
startPoint=latLng;

//Altes Rechteck löschen
if(rectangle!=null)
rectangle.setMap(null);

//Rechteck erstellen
rectangle = new google.maps.Rectangle();
rectangle.setMap(map);

//Eventlistener für Klick entfernen
google.maps.event.clearListeners(map,’click‘);

//Eventlistener für Mausbewegungen
google.maps.event.addListener(map, ‚mousemove‘, function(event) {
drawRect(event.latLng);
});

//Eventlistener für Klick (andere Funktion)
google.maps.event.addListener(map, ‚click‘, function() {
finishRect();
});
}
else{
//Grenzen des Rechtecks
bounds = new google.maps.LatLngBounds();
bounds.extend(startPoint);
bounds.extend(latLng);

//Rechteck neu konfigurieren
var rectOptions = {
strokeColor: „#0000FF“,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: „#0000FF“,
fillOpacity: 0.35,
map: map,
clickable: false,
bounds: bounds
};
rectangle.setOptions(rectOptions);
}
}

function finishRect(latLng){
//Punkte ausgeben (Nord-Ost und Süd-West)
document.getElementById(„output“).innerHTML=“Point1: „+bounds.getNorthEast().lat()+“ / „+bounds.getNorthEast().lng()+„<br />Point2: „+bounds.getSouthWest().lat()+“ / „+bounds.getSouthWest().lng();

//Listener entfernen
google.maps.event.clearListeners(map,’click‘);
google.maps.event.clearListeners(map,’mousemove‘);

//Startpunkt zurücksetzen
startPoint = null;

//Listener für das zeichnen des nächsten Rechtecks hinzufügen
google.maps.event.addListener(map, ‚click‘, function(event) {
drawRect(event.latLng);
});
}

</script>
</head>
<body onload=“init()“>
<div id=“map_canvas“ style=“width:50%; height:50%“></div>
<b id=“output“></b>
</body>
</html>

Tags: google maps v3 einbinden, google maps api v3 tutorial


Kommentare zu Google Maps API v3 Tutorial Geofencing (Rechteck zeichnen):

  • Christian sagt:

    Hallo Roman,

    vielen Dank für die Erklärung, sie ist super und war genau das, was ich gesucht habe. Ich möchte digitalisierte Karten mit Koordinaten versehen und einfach nur den Mittelpunkt der Karte zu nehmen hat mir nicht gefallen. Jetzt kann ich die Ausdehnung sehr einfach und komfortabel ermitteln. Danke dafür!

    Übringes habe ich festgestellt, dass Dein Skript noch geschmeidiger läuft, wenn man die Bounds des gewählten Rechtecks schon im if-Teil der Funktion drawRect() einrichtet. Sie sitzen dann zwar unterhalb des Cursors, aber bei schnellen Mausbewegungen während des Aufziehens ruckelt es weniger.

    Grüße, Christian

Kommentare



* Alle gekennzeichneten Felder sind Pflichtangaben.

Artikel: Google Maps API v3 Tutorial Geofencing (Rechteck zeichnen)