Wie zeichne Draggable und Resizable Rechteck in Google Map api v3

Question

Ich möchte ein benutzerdefiniertes Rechteck, das resizable und ziehbare mit einem Schließen-Schaltfläche und , die mit den Grenzen von der Abfrage in der Datenbank gebildet wird gezogen werden kann.

Dank

Answer 1

Dies ist ein Rechteck der Größe veränderbar und dragabble. Eine kleine Suche und einige Versuche würden dir geben, was du brauchst.

function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(44.5452, -78.5389), 
      zoom: 9, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), 
      myOptions); 

     var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(44.490, -78.649), 
      new google.maps.LatLng(44.599, -78.443) 
     ); 

     var rectangle = new google.maps.Rectangle({ 
      bounds: bounds, 
      editable: true 
     }); 

     rectangle.setMap(map); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

Hoffe, das hilft!

Answer 2

Ich denke, das einzige, was Sie hinzufügen müssen, ist "ziehbare: wahr" in Rechteckoptionen.

Also sollte es so etwas sein;

var rectangle = new google.maps.Rectangle({ 
     bounds: bounds, 
     editable: true, 
     draggable: true 
    }); 

Dadurch wird das Rechteck in der Größe veränderbar und ziehbar. Auch im Hauptteil der Seite erstellen Sie eine Schaltfläche.

In der Funktion remove können Sie Ihren Code schreiben, um eine Verbindung zur Datenbank herzustellen. Sie müssen die Grenzen außerhalb von initialize() angeben, um darauf zugreifen zu können. Dieser Link könnte Ihnen helfen zu verstehen, wie Sie Google Maps und MySQL verbinden.