在Google Maps API v3上从MySQL数据库绘制多个多边形 [英] Drawing Multiple Polygons on Google Maps API v3 from MySQL database
本文介绍了在Google Maps API v3上从MySQL数据库绘制多个多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< subdivision name =Auburn Hills>我的PHP脚本根据我的表格数据输出以下XML。 ;
< coord lat =39.00748lng = - 92.323222/>
< coord lat =39.000843lng = - 92.323523/>
< coord lat =39.000509lng = - 92.311592/>
< coord lat =39.007513lng = - 92.311378/>
< coord lat =39.00748lng = - 92.323222/>
< /细分>
< subdivision name =Vanderveen>
< coord lat =38.994206lng = - 92.350645/>
< coord lat =38.985033lng = - 92.351074/>
< coord lat =38.984699lng = - 92.343092/>
< coord lat =38.981163lng = - 92.342234/>
< coord lat =38.984663lng = - 92.3335/>
< coord lat =38.993472lng = - 92.333179/>
< coord lat =38.994206lng = - 92.350645/>
< /细分>
我的问题是，我正在使用的JavaScript尝试并在地图上绘制每个图形，坐标。使用警报，我可以看到用于存储new google.maps.Polygon坐标的数组返回每个形状的第一个纬度和经度对，并绘制一条线段，而不是完整的多边形。
$ b
函数初始化（）{
var mapOptions = {
...
};
var map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;
var arr = new Array（）;
var polygons = [];
downloadUrl（ 细分-coordinates.php，功能（数据）{
VAR XML = data.responseXML;
变种细分= xml.documentElement.getElementsByTagName（ 细分 ）;
为（VAR I = 0; I< subdivision.length;我++）{
变种坐标= xml.documentElement.getElementsByTagName（ 细分）[I] .getElementsByTagName（ 坐标） ;
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）;
}
}）;
}
函数downloadUrl（url，callback）{
..blah..blah stuff from google
}
函数doNothing（）{}
google .maps.event.addDomListener（window，'load'，initialize）;
这个问题似乎与我将数据推入数组arr的方式明确相关。我尝试了几种不同的方法来处理它，但似乎没有任何工作（我承认JavaScript是新手）。任何建议将不胜感激！
google.maps.Polygon 路径属性需要一个数组为google.maps.LatLngs的数组。您需要将每个细分作为自己的数组进行处理，并将其作为单独的路径推入一个多边形，或者（如下所示）为每个多边形创建一个新的多边形。
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））
））;
ounds.extend（arr [arr.length-1]）$ b $ b}
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 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（ 细分-coordinates.php，功能（数据）{风险XML = XMLPARSE（的xmlString）; VAR细分= xml.getElementsByTagName（ 细分）; //警报（subdivision.length）;对于（VAR我= 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（新google.maps.LatLng（parseFloat（坐标[j]的.getAttribute（ LAT）），parseFloat（坐标[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（边界）;} VAR的xmlString =<细分><细分名称= Auburn Hills的 ><坐标LAT = 39.00748 LNG = - 92.323222/><坐标LAT = 39.000843lng = - 92.323523/>< coord lat =39.000509lng = - 92.311592/>< coord lat =39.007513lng = - 92.311378/>< coord lat = 39.00748lng = - 92.323222/>< / subdivision>< subdivision name =Vanderveen>< coord lat =38.994206lng = - 92.350645/>< coord lat =
＃map-canvas，body，html {height：100％; width：100％;}
< script src = http://maps.google.com/maps/api/js\"></script><div id =map-canvas>< / div>
So, I am attempting to draw multiple polygons onto a google map via polygon spatial data from my MySQL table. I have a php script that outputs the following XML based off my table data.
<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>
My issue is that the javascript I am using to try and draw each shape onto the map is returning odd coordinates. using an alert, I can see that the array that is meant to store the coordinates for the "new google.maps.Polygon" is returning the first latitude and longitude pair for each shape and drawing a line segment as opposed to the full polygon. The problematic javascript is below.
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);
The issue seems to be clearly related to how I am pushing the data into the array "arr". I've tried a few different methods of handling it and nothing seems to be working (I am admittedly a novice when it comes to javascript). Any advice would be greatly appreciated!
解决方案
The google.maps.Polygon paths property takes an array of arrays of google.maps.LatLngs. You need to process through each subdivision as its own array and either push it as a separate path into the one polygon or (as below) create a new polygon for each.
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);
}
code snippet:
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>
这篇关于在Google Maps API v3上从MySQL数据库绘制多个多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
