Question

我是谷歌地图api的新手，我试图使用谷歌地图api绘制多边形，我想显示多边形的项目，上面（内部）的项目多边形允许绘制建筑物多边形。

在导入新的geoJSON数据并创建新对象之前，我试图清除所有的多边形对象。我似乎无法使setMap（null）函数正常工作。希望有人能够让我知道我失败的地方。 demo

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<input type="hidden" id="center_point" value="12.939884,77.62540710000007" />
<input type="hidden"  id="projectPolygon" value="" />
<input type="hidden"  id="autocompleteLat" value="12.939884" />
<input type="hidden"  id="autocompleteLng" value="77.62540710000007" />
<input type="hidden"  id="poly_map_codes" value="" />
<input type="hidden"  id="zoom_level" value="18" />
<textarea id="xml_valuesMain" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<textarea id="xml_values" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<div id="init_map" style="height: 600px;"></div>
<script>
$(function(){
    initMap();
});

function initMap() 
{
    var polygons = [];
    var coordinates = [];
    var markers=[];
    var latt=$('#autocompleteLat').val(); 
    var lngg=$('#autocompleteLng').val();
    var amsterdam = new google.maps.LatLng(latt,lngg);
    var zoom_level=parseInt($('#zoom_level').val());
    var map = new google.maps.Map(document.getElementById('init_map'),{ center: amsterdam, zoom: zoom_level, mapTypeId:google.maps.MapTypeId.SATELLITE });

    drawSecondPolygon();
function drawSecondPolygon()
{
    google.maps.event.trigger(map, 'refresh');
    var data =$('#xml_values').val();
    var jsonData = JSON.parse(data);
    var polygons = [];
    console.log("polygon length="+polygons.length);
    for( var i = 0; i < polygons.length; i++ )
    {
        polygons[i].setMap(null)
    }   
   polygons.length = 0;

    for (var i = 0; i < jsonData.length; i++) 
    {
        var latArr = jsonData[i].latlng;
        var source_d = jsonData[i].source;
        arr = [];
        for(j=0; j<latArr.length;j++)
        {
            var lat=latArr[j].lat;
            var lng=latArr[j].lng;
            arr.push(new google.maps.LatLng(parseFloat(lat),parseFloat(lng)));
        } 
        if(source_d=="project") { var FillColor='#DA70D6'; var StrokeColr='#BA55D3'; var editval=false; }
        else if(source_d=="tower") { var FillColor='#FF8800'; var StrokeColr='#FF8800'; var editval=true; }
        else if(source_d=="amenity") { var FillColor='#990000'; var StrokeColr='#990000'; var editval=false; }
        else { var FillColor='#66FF00'; var StrokeColr='#66FF00'; var editval=false; }
    polygons.push(new google.maps.Polygon({
        paths: arr,
        Source:source_d,
        strokeColor: StrokeColr,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        editable:editval,
        clickable:true,
        fillColor: FillColor,
        fillOpacity: 0.35
    }));
    console.log("polygons.length="+polygons.length);
    polygons[polygons.length-1].setMap(null);
    polygons[polygons.length-1].setMap(map);
     if(editval==false)
     {
          console.log("Something working fine");
            google.maps.event.addListener(polygons[polygons.length-1], 'click', function (clickEvent) 
            {
                polygons[polygons.length-1].setMap(null);
                var newLatLng=$('#poly_map_codes').val();
                var clickEventLat=clickEvent.latLng.lat();
                var clickEventLng=clickEvent.latLng.lng();
                if(newLatLng!='') { newLatLng+=","+clickEventLat+" "+clickEventLng;  }
                else { newLatLng+=clickEventLat+" "+clickEventLng; }
                $('#poly_map_codes').val(newLatLng);
                //console.log(newLatLng);
                //drawSecondPolygon();
                if(newLatLng)
                { 
                   var getLatLng=newLatLng;
                   var getLatLngArr=getLatLng.split(",");
                   var main_LatLngArr=[];
                   for(i=0; i<getLatLngArr.length; i++)
                   {
                      var my_object={};
                      var getLatLngExp=getLatLngArr[i].split(" ");
                      my_object.lat=getLatLngExp[0];
                      my_object.lng=getLatLngExp[1];
                      main_LatLngArr.push(my_object);     
                   }
                   var LatLngObj={};
                   LatLngObj.source="tower";
                   LatLngObj.latlng=main_LatLngArr;  
                   var oldPolyArr=$('#xml_valuesMain').val();
                   var oldPolyArr=JSON.parse(oldPolyArr);
                   oldPolyArr.push(LatLngObj);
                   $('#xml_values').val(JSON.stringify(oldPolyArr));
                   polygons[polygons.length-1].setMap(null);
                   drawSecondPolygon();
                   console.log("oldPolyArr="+JSON.stringify(oldPolyArr));   
                }
            });
         }          

     }    
  }          
}
</script>

Answer 1

初看起来，你重新声明了drawSecondPolygon函数中的var polygons = [];，它覆盖了initMap中声明的同一个变量的内容。

thi注释这一行..所以你总是可以使用父多边形数组

function drawSecondPolygon()
{
   google.maps.event.trigger(map, 'refresh');
   var data =$('#xml_values').val();
   var jsonData = JSON.parse(data);
   //var polygons = [];

如何在另一个多边形上方绘制多边形

1 个答案: