javascript - una - usar mysql y php con google maps
Dibujar múltiples polígonos en Google Maps API v3 desde la base de datos MySQL (1)
Por lo tanto, estoy intentando dibujar múltiples polígonos en un mapa de Google a través de datos espaciales de polígonos de mi tabla MySQL. Tengo un script php que genera el siguiente XML basado en los datos de mi tabla.
<subdivision name="Auburn Hills">
<coord lat="39.00748" lng="-92.323222"/>
<coord lat="39.000843" lng="-92.323523"/>
<coord lat="39.000509" lng="-92.311592"/>
<coord lat="39.007513" lng="-92.311378"/>
<coord lat="39.00748" lng="-92.323222"/>
</subdivision>
<subdivision name="Vanderveen">
<coord lat="38.994206" lng="-92.350645"/>
<coord lat="38.985033" lng="-92.351074"/>
<coord lat="38.984699" lng="-92.343092"/>
<coord lat="38.981163" lng="-92.342234"/>
<coord lat="38.984663" lng="-92.3335"/>
<coord lat="38.993472" lng="-92.333179"/>
<coord lat="38.994206" lng="-92.350645"/>
</subdivision>
Mi problema es que el javascript que estoy usando para intentar dibujar cada forma en el mapa devuelve coordenadas impares. usando una alerta, puedo ver que la matriz que está destinada a almacenar las coordenadas para el "nuevo google.maps.Polygon" está devolviendo el primer par de latitud y longitud para cada forma y dibujando un segmento de línea en oposición al polígono completo. El javascript problemático está debajo.
function initialize() {
var mapOptions = {
...
};
var map = new google.maps.Map(document.getElementById(''map-canvas''),
mapOptions);
var arr = new Array();
var polygons = [];
downloadUrl("subdivision-coordinates.php", function(data) {
var xml = data.responseXML;
var subdivision = xml.documentElement.getElementsByTagName("subdivision");
for (var i = 0; i < subdivision.length; i++) {
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
arr.push( new google.maps.LatLng(
parseFloat(coordinates[i].getAttribute("lat")),
parseFloat(coordinates[i].getAttribute("lng"))
));
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: ''#FF0000'',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ''#FF0000'',
fillOpacity: 0.35
}));
polygons[polygons.length-1].setMap(map);
}
});
}
function downloadUrl(url, callback) {
..blah..blah stuff from google
}
function doNothing() {}
google.maps.event.addDomListener(window, ''load'', initialize);
El problema parece estar claramente relacionado con la forma en que estoy introduciendo los datos en la matriz "arr". He intentado algunos métodos diferentes para manejarlo y parece que nada funciona (estoy seguro de que soy un novato en lo que respecta a javascript). ¡Cualquier consejo sería muy apreciado!
La propiedad de rutas google.maps.Polygon toma una matriz de matrices de google.maps.LatLngs. Debe procesar a través de cada subdivisión como su propia matriz e insertarla como una ruta separada en el polígono o (como a continuación) crear un nuevo polígono para cada una.
var subdivision = xml.getElementsByTagName("subdivision");
for (var i = 0; i < subdivision.length; i++) {
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
for (var j=0; j < coordinates.length; j++) {
arr.push( new google.maps.LatLng(
parseFloat(coordinates[j].getAttribute("lat")),
parseFloat(coordinates[j].getAttribute("lng"))
));
bounds.extend(arr[arr.length-1])
}
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: ''#FF0000'',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ''#FF0000'',
fillOpacity: 0.35
}));
polygons[polygons.length-1].setMap(map);
}
fragmento de código:
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(40, -117),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
// downloadUrl("subdivision-coordinates.php", function(data) {
var xml = xmlParse(xmlString);
var subdivision = xml.getElementsByTagName("subdivision");
// alert(subdivision.length);
for (var i = 0; i < subdivision.length; i++) {
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
for (var j = 0; j < coordinates.length; j++) {
arr.push(new google.maps.LatLng(
parseFloat(coordinates[j].getAttribute("lat")),
parseFloat(coordinates[j].getAttribute("lng"))
));
bounds.extend(arr[arr.length - 1])
}
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: ''#FF0000'',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ''#FF0000'',
fillOpacity: 0.35
}));
polygons[polygons.length - 1].setMap(map);
}
// });
map.fitBounds(bounds);
}
var xmlString = ''<subdivisions><subdivision name="Auburn Hills"><coord lat="39.00748" lng="-92.323222"/><coord lat="39.000843" lng="-92.323523"/><coord lat="39.000509" lng="-92.311592"/><coord lat="39.007513" lng="-92.311378"/><coord lat="39.00748" lng="-92.323222"/></subdivision><subdivision name="Vanderveen"><coord lat="38.994206" lng="-92.350645"/><coord lat="38.985033" lng="-92.351074"/><coord lat="38.984699" lng="-92.343092"/><coord lat="38.981163" lng="-92.342234"/><coord lat="38.984663" lng="-92.3335"/><coord lat="38.993472" lng="-92.333179"/><coord lat="38.994206" lng="-92.350645"/></subdivision><subdivisions>'';
/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != ''undefined'' && typeof GetObject != ''undefined'') {
var doc = new ActiveXObject(''Microsoft.XMLDOM'');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != ''undefined'') {
return (new DOMParser()).parseFromString(str, ''text/xml'');
}
return createElement(''div'', null);
}
google.maps.event.addDomListener(window, ''load'', initialize);
#map-canvas,
body,
html {
height: 100%;
width: 100%;
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>