绘制多个多边形在谷歌地图API v3从MySQL数据库
Drawing Multiple Polygons on Google Maps API v3 from MySQL database
所以,我试图绘制多个多边形到谷歌地图通过多边形空间数据从我的MySQL表。我有一个php脚本,根据我的表数据输出以下XML:
<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>
我的问题是,我正在使用的javascript尝试和绘制每个形状到地图返回奇数坐标。使用警报,我可以看到用于存储"new google.maps"的坐标的数组。"多边形"返回每个形状的第一个纬度和经度对,并绘制线段,而不是完整的多边形。有问题的javascript在下面。
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);
这个问题似乎显然与我如何将数据推入数组"arr"有关。我尝试了一些不同的方法来处理它,似乎没有什么工作(我承认,当涉及到javascript时,我是一个新手)。任何建议将非常感激!
google.maps.Polygon paths属性接受一个由google.maps. latlgs数组组成的数组。您需要将每个细分作为其自己的数组进行处理,并将其作为单独的路径推入一个多边形中,或者(如下所示)为每个细分创建一个新多边形。
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);
}
工作小提琴代码片段:
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
相关文章:
- 使用jquery将mysql数据获取到新的表行中
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 标记的实时更新,无需加载页面谷歌地图API V3
- 将地理编码结果转换为php变量以发布到mysql数据库
- 谷歌地图v3标记没有显示ie8和9
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 从MySQL数据库中获取输入数据需要两次页面刷新
- 谷歌地图停止显示点v3
- 将一个表的id与另一个表中的user_id进行匹配,以获取mysql中的记录
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 如何在多承诺链中处理谷歌地图API V3事件
- 如何使用PHP将javascript变量添加到mysql数据库中
- 访问MySQL数据库,使用JavaScript在Google Maps API V3上添加标记
- 谷歌地图v3->数据库/mysql->AJAX->LOOP->AJAX->环
- Mysql OR语句使用AJAX返回数组中的所有行名值,然后在Google Maps API V3中加载多个标记
- 使用Google Maps v3 API搜索MySQL数据
- 绘制多个多边形在谷歌地图API v3从MySQL数据库
- 边栏谷歌地图API v3使用PHP/MYSQL提取数据