我向我的页面输出一个多边形数据列表，以显示为每个单独的形状。下面的代码似乎只显示添加到地图中的最后一个面。我需要同时在地图上显示所有这些。
目的是显示社区的几种形状的邮政编码块，并打开一个信息窗口，其中包含有关该社区的信息。
var polysData = new Array();
var oData = new Object();
oData.CommunityID = '3';
oData.geom = 'POLYGON ((-95.95255 40.392702, -95.952468 40.378206999999996, -95.95255 40.392702))';
oData.ZipCode = '68305';
polysData.push(oData);
oData.CommunityID = '3';
oData.geom = 'POLYGON ((-96.581603 40.045477999999996, -96.581777 40.045445, -96.581603 40.045477999999996))';
oData.ZipCode = '68309';
polysData.push(oData);
oData.CommunityID = '3';
oData.geom = 'POLYGON ((-96.066888999999989 40.494158, -96.066886 40.48666, -96.066885 40.48317, -96.066888999999989 40.494158))';
oData.ZipCode = '68320';
polysData.push(oData);
var map;
var infoWindow;
var bounds ;
function initMap() {
bounds = new google.maps.LatLngBounds();
var i;
var tmp;
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.413467,-96.274233 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infoWindow = new google.maps.InfoWindow();
var col = '#FF000';
for (i = 0; i < polysData.length; i++) {
if (i == 1) col = '#00FF00';
if (i == 2) col = '#0000FF';
polysData[i].polys1 = new google.maps.Polygon({
paths: parsePolyStrings(polysData[i].geom),
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: col,
fillOpacity: 0.15,
map: map
});
var n = polysData[i].ZipCode;
google.maps.event.addListener(polysData[i].polys1, "click", function (event) {
infoWindow.setContent("This CommunityID is: " + n);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
// for (var i = 0; i < polysData[i].polys1.getPath().getLength(); i++) {
//bounds.extend(polysData[i].polys1.getPath().getAt(i));
// }
//map.fitBounds(bounds);
}
}
function parsePolyStrings(ps) {
var i, j, lat, lng, tmp, tmpArr,
arr = [],
//match '(' and ')' plus contents between them which contain anything other than '(' or ')'
m = ps.match(/([^()]+)/g);
if (m !== null) {
for (i = 0; i < m.length; i++) {
//match all numeric strings
tmp = m[i].match(/-?d+.?d*/g);
if (tmp !== null) {
//convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
for (j = 0, tmpArr = []; j < tmp.length; j += 2) {
lng = Number(tmp[j]);
lat = Number(tmp[j + 1]);
tmpArr.push(new google.maps.LatLng(lat, lng));
}
arr.push(tmpArr);
}
}
}
//array of arrays of LatLng objects, or empty array
return arr;
}
我认为这个问题主要源于parsePolyStrings函数给出的 duff 响应。该函数按照它们在源数据中的字符串中出现的顺序返回纬度/lng，而您需要它们以相反的顺序返回它们。我在输入数据中添加了一些新点，以便您可以更轻松地观察多边形的添加，因为它们在地图上很难找到仅仅是线 - 这就引出了一个问题~为什么只使用多边形来显示线条，为什么不使用折线？
如果您修改parsePolyStrings函数以接受第二个参数 - 对于bounds- 您可以轻松扩展此latLngBounds，以便以后可以fitBounds
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
<script>
var map,infoWindow,bounds,tmp,col;
var polygons=[];
var polysData = [];
polysData.push({
CommunityID:3,
geom:'POLYGON ((-95.95255 40.392702, -95.952468 40.378206999999996, -95.95255 40.392702))',
ZipCode:68305
});
polysData.push({
CommunityID:3,
geom:'POLYGON ((-96.581603 40.045477999999996, -96.581777 40.045445, -96.581603 40.045477999999996))',
ZipCode:68309
});
polysData.push({
CommunityID:3,
geom:'POLYGON ((-96.066888999999989 40.494158, -96.066886 40.48666, -96.066885 40.48317, -96.066888999999989 40.494158))',
ZipCode:68320
});
polysData.push({/* A clearly visible PolyGon.... */
CommunityID:404,
geom:'POLYGON((-96.178487 40.377587,-96.177056 40.273619,-96.013566 40.275108,-96.010930 40.379736))',
ZipCode:123456
});
polysData.push({/* An even more obvious PolyGon.... */
CommunityID:303,
geom:'POLYGON ((-96.742282 40.465339, -96.746756 40.265854, -96.561438 40.266753, -96.546101 40.285770,-96.467254 40.300979, -96.392446 40.363040, -96.389052 40.379546, -96.388333 40.465014))',
ZipCode:123456
});
/*
The lat/lng in this were in the wrong order for use with given coordinates...
*/
function parsePolyStrings(ps,b) {
var i, j, lat, lng, tmp, tmpArr,latlng,
arr = [],
m = ps.match(/([^()]+)/g);
if (m !== null) {
for (i = 0; i < m.length; i++) {
tmp = m[i].match(/-?d+.?d*/g);
if (tmp !== null) {
for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
lng = parseFloat(tmp[j]);
lat = parseFloat(tmp[j + 1]);
latlng={ lat:lat, lng:lng };
tmpArr.push( latlng );
b.extend( latlng )
}
arr.push( tmpArr );
}
}
}
return arr;
}
function initMap(){
var options = {
zoom: 10,
center: new google.maps.LatLng( 40.413467, -96.274233 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map( document.getElementById('map'), options );
infoWindow = new google.maps.InfoWindow();
bounds = new google.maps.LatLngBounds();
polysData.forEach( ( obj, index )=>{
col = ( index % 2 == 0 )? '#00FF00' : '#0000FF';
var coordinates=parsePolyStrings( obj.geom, bounds );
var config={
paths:coordinates,
strokeColor:'#000000',
strokeOpacity:0.8,
strokeWeight:1,
fillColor:col,
fillOpacity:0.15,
/* add custom properties */
cid:obj.CommunityID,
zip:obj.ZipCode
};
var poly=new google.maps.Polygon( config );
poly.setMap( map );
google.maps.event.addListener( poly, 'click', function(event){
infoWindow.setContent( "This CommunityID is: " + this.cid + "nZipCode: " + this.zip );
infoWindow.setPosition( event.latLng );
infoWindow.open( map );
});
polygons.push( poly );
})
map.fitBounds( bounds );
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<div id='map'></div>
</body>
</html>