Javascript Girl
  1. Javascript Girl
  3. Dessiner plusieurs polygones sur Google Maps API v3 à partir de la base de données MySQL
Intereting Posts
Comment pouvons-nous utiliser $ compile en dehors d'une directive dans Angularjs Téléchargement et aperçu de l'image multiple Pop-up ne s'affiche pas (avec magnifiques-popup) JQuery ne paralyse pas xml avec les nœuds appelés option Comment puis-je inclure les nouvelles lignes dans les étiquettes dans les tableaux D3? Faites de Html5 Canvas et son contenu d'image réactive dans les navigateurs Différence entre la notation de point et la notation de parenthèse en javascript Comment puis-je annuler une requête HTTP fetch ()? Comment puis-je forcer jQuery Valider pour vérifier le nom d'utilisateur en double dans la base de données? Cartes Google – obtenez un latlng de X% le long d'une polyligne droite Chrome ne supprime pas les cookies de session Les données angularJS $ http ne sont pas correctement retournées Comment pouvez-vous trouver le centroïde d'un polygone irrégulier concave en JavaScript? Will setInterval drift? Dessinez un cercle en toile manuellement pixel par pixel

Dessiner plusieurs polygones sur Google Maps API v3 à partir de la base de données MySQL

Donc, je tente de dessiner plusieurs polygones sur une carte Google via des données spatiales polygonales à partir de ma table MySQL. J'ai un script php qui produit le XML suivant en fonction des données de ma table. 

<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>

Mon problème est que le javascript que j'utilise pour essayer de dessiner chaque forme sur la carte renvoie des coordonnées impaires. En utilisant une alerte, je peux voir que le tableau qui est destiné à stocker les coordonnées du «nouveau google.maps.Polygon» renvoie la première paire de latitude et de longitude pour chaque forme et dessine un segment de ligne par opposition au polygone complet. Le javascript problématique est ci-dessous. 

 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);

La question semble être clairement liée à la façon dont je pousse les données dans le tableau "arr". J'ai essayé quelques méthodes différentes de la gérer et rien ne semble fonctionner (je suis certainement un novice quand il s'agit de javascript). Tout avis serait grandement apprécié!

La propriété google.maps.Polygon path prend un tableau de tableaux de google.maps.LatLngs. Vous devez traiter à travers chaque subdivision comme son propre réseau et le pousser comme un chemin distinct dans le même polygone ou (comme ci-dessous) créer un nouveau polygone pour chacun. 

  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); }

Violon de travail

extrait de code: 

 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>