Javascript Google Maps API3多边形多圈

时间:2011-10-10 20:43:58

标签: javascript maps

我正在使用Mysql和PHP生成由Google Map使用的XML。我正在设置标记和多边形圆。标记设置没有问题,但只显示一个多边形圆,而不是其他九个(从数据库返回总共十个) 我很确定这是一个数组问题,但我似乎无法理解为什么只创建一个多边形。希望有人能指出我正确的方向,这是我的代码:

   //function to consume xml
   var xml = parseXml(data); 
   var polygonNodes = xml.documentElement.getElementsByTagName("polygon"); 
   for (var i = 0; i < polygonNodes.length; i++) {
   var polylatlng = new google.maps.LatLng( 
          parseFloat(polygonNodes[i].getAttribute("polygon_lat")), 
          parseFloat(polygonNodes[i].getAttribute("polygon_lng"))); 
   }
   createCircle(polylatlng);

  //here i am creating the polygon circle
  function createCircle(polylatlng) { 
  var html = "<div id='infodiv'>HelloWorld</div>"; 
    var circle = new google.maps.Circle({
        map: map,
        center: polylatlng,
        fillColor: '#7491D3',
        fillOpacity: 0.03,
        strokeColor: '#7491D3',
        strokeOpacity: 0.1,
        strokeWeight: 1,
        radius: 18362.55489862987
        }); 
  google.maps.event.addListener(circle, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, circle); 
  }); 
}

1 个答案:

答案 0 :(得分:1)

除非我读错了,否则你的循环中不包含createCircle函数,所以它只被调用一次。尝试:

for (var i = 0; i < polygonNodes.length; i++) {
    var polylatlng = new google.maps.LatLng( 
          parseFloat(polygonNodes[i].getAttribute("polygon_lat")), 
          parseFloat(polygonNodes[i].getAttribute("polygon_lng"))
    ); 
    createCircle(polylatlng);
}

良好的代码缩进有助于解决此类问题:)。