mehrere Rechtecke in Google Maps von SQL-Datenbank

Question

Ich versuche, mehrere Rechtecke mit Infofenstern auf einer Google Map zu erstellen. Ich habe das Muster verfolgt, das für mehrere Markierungen bei verwendet wurde. Ich verwendete zuerst dieses Beispiel und benutzte eines der Lat und eines von Long, um Ikonen auf der Karte anzuzeigen. Das hat funktioniert. Dann ändere ich den Code in Rechtecke und fügt Grenzen hinzu. Aber keine Rechtecke erscheinen auf der Karte. Ich habe versucht, eines der Rechtecke auf der Karte zu codieren und ein Rechteck erschien.

Ich stellte auch sicher, dass die Beschreibung, die in der Infowindow verwendet wurde, keine Links hatte. Ich fand, dass das ein Problem war, wenn ich einen Link in der Datenvariable übergab. Aber ich könnte den Link zum Funktionieren bringen, wenn ich die Variable mit einem Link an der Stelle der Erstellung des Infowindow-Inhalts hinzufüge.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var markers = [ 
    <asp:Repeater ID="rptMarkers" runat="server"> 
    <ItemTemplate> 
      {      
       "title": '<%# Eval("Quad_Name") %>', 
       "north": '<%# Eval("poly_north") %>', 
       "east": '<%# Eval("poly_east") %>', 
       "south": '<%# Eval("poly_south") %>', 
       "west": '<%# Eval("poly_west") %>', 
       "description": '<%# Eval("smqcomment") %>' 
      } 
</ItemTemplate> 
<SeparatorTemplate> 
    , 
</SeparatorTemplate> 
</asp:Repeater> 
    ]; 


    window.onload = function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(41.78768535298007, -99.96481875), 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 

     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 



     for (i = 0; i < markers.length; i++) { 
      var data = markers[i] 

      var rectangle = new google.maps.Rectangle({ 
       strokeColor: '#FF0000', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       map: map, 
       bounds: { 
        north: data.north, 
        south: data.south, 
        east: data.east,      
        west: data.west 
       } 
      }); 

      (function (rectangle,data) { 
       google.maps.event.addListener(rectangle, "click", function (e) { 
        infoWindow.setContent(data.description); 
        infoWindow.open(map,rectangle); 
       }); 
      })(rectangle,data);    
     } 
    } 
</script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 

<div id="dvMap" style="width: 960px; height: 532px"></div> 

Jede Hilfe wäre super danke.

Answer 1

Ich bekomme einen Javascript Fehler auf Ihrer Live-Seite: js:31 InvalidValueError: setBounds: not a LatLngBounds or LatLngBoundsLiteral: in property south: not a number. Sie müssen die Zeichenfolgen in Ihrem JSON in Zahlen übersetzen, bevor Sie sie verwenden, um google.maps.Rectangle Objekte zu konstruieren.

Um ein Infofenster auf einem Rechteck zu öffnen, müssen Sie die Position des Infofensters festlegen. Die Syntax infoWindow.open(map, rectangle) gilt nicht für Rechtecke, die nur für Marken gelten (zumindest für API-Objekte), siehe the documentation for more information.

• Position enthält den LatLng bei der dieses Informationsfenster verankert ist. Hinweis: Ein InfoWindow kann entweder an ein Marker-Objekt angehängt werden (in diesem Fall basiert seine Position auf dem Standort des Markers) oder auf der Karte selbst bei einer angegebenen LatLng. Durch das Öffnen eines Infofensters auf einer Markierung wird die Position automatisch aktualisiert.

(function(rectangle, data) { 
    google.maps.event.addListener(rectangle, "click", function(e) { 
    infoWindow.setContent(data.description); 
    infoWindow.setPosition(rectangle.getBounds().getCenter()); 
    infoWindow.open(map); 
    }); 
})(rectangle, data); 

Code-Schnipsel:

window.onload = function() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(41.492537, -99.901813), 
 
    zoom: 6, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    }; 
 

 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
 

 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (i = 0; i < markers.length; i++) { 
 
    var data = markers[i] 
 

 
    var rectangle = new google.maps.Rectangle({ 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     map: map, 
 
     bounds: { 
 
     north: parseFloat(data.north), 
 
     south: parseFloat(data.south), 
 
     east: parseFloat(data.east), 
 
     west: parseFloat(data.west) 
 
     } 
 
    }); 
 

 
    (function(rectangle, data) { 
 
     google.maps.event.addListener(rectangle, "click", function(e) { 
 
     infoWindow.setContent(data.description); 
 
     infoWindow.setPosition(rectangle.getBounds().getCenter()); 
 
     infoWindow.open(map); 
 
     }); 
 
    })(rectangle, data); 
 
    } 
 
} 
 
var markers = [ 
 

 
    { 
 
    "title": 'Andrews', 
 
    "north": '42.75001', 
 
    "east": '-103.625', 
 
    "south": '42.62501', 
 
    "west": '-103.75', 
 
    "description": 'Andrews description', 
 
    } 
 

 
    , 
 

 
    { 
 
    "title": 'Arlington', 
 
    "north": '41.50001', 
 
    "east": '-96.25001', 
 
    "south": '41.37501', 
 
    "west": '-96.37501', 
 
    "description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Arlington/Arlington_Quad.jpg" height="400">', 
 
    } 
 

 
    , 
 

 
    { 
 
    "title": 'Ashland East', 
 
    "north": '41.12501', 
 
    "east": '-96.25001', 
 
    "south": '41.00001', 
 
    "west": '-96.37501', 
 
    "description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Ashland_East/Ashland_East_Quad.jpg" height="400"">', 
 
    } 
 

 
    , 
 

 
    { 
 
    "title": 'Beaver Wall', 
 
    "north": '43.00001', 
 
    "east": '-102.625', 
 
    "south": '42.87501', 
 
    "west": '-102.75', 
 
    "description": 'Beaver Wall description', 
 
    } 
 

 
];

html, 
 
body, 
 
#dvMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="dvMap"></div>

Answer 2

Ich sehe, dass geocodezip den Code in ihrer ursprünglichen Antwort auf die Frage aktualisiert. Zwei Dinge sind neu

Zuerst legte die Definition der Grenzen die Funktion von parseFloat() auf jede der Koordinaten an. Ich bin mir nicht sicher, ob das nötig war, da ich Icons oder Polygone erhalten konnte, um mit den Koordinaten ohne diese Funktion zu zeichnen.

denke ich, was wirklich das Problem gelöst

var bounds = new google.maps.LatLngBounds(); 

Ich bin nicht wirklich sicher, dass die Code-Zeile wurde hinzugefügt, was das neben der Definition der Variablen „Grenzen“ tut, aber es scheint mein Problem gelöst zu haben.

Danke geocodezip!