Polígonos de mapas de Google

I want to draw multiple polygons in the same google map, what i need to do is to read latlngs from a listbox, they are in this way:

lat1,lng1,1 lat2,lng2,1 lat3,lng3,1 lat1,lng1,2 lat2,lng2,2 lat3,lng3,2

and depending on the value at the right(1 or 2) I will read the corresponding latlns and draw the polygon, actually i'm doing this, in my loop the polygons are painted but there´s a line connecting them, what can I do?,I mean, HOW CAN I DRAW POLYGONS WITHOUT THIS CONNECTING LINES?, thank you very much!!!

Aquí está mi código:

    <script type="text/javascript">

        var bermudaTriangle=[];
        var places = [];
        var geoDataSplit;
        function initialize() {

            var mapDiv = document.getElementById('map_canvas');
            var coords = document.getElementById("selPoly");

            var map = new google.maps.Map(mapDiv, {
                center: new google.maps.LatLng(19.3162200000000, -99.2204930000000),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var latlng;

            for (var i = 0; i < coords.options.length; i++) 
                {
                    var geoData = coords.options[i].text;
                    geoDataSplit = geoData.split(",");
                    var counter = geoDataSplit[2];

                    for (geoDataSplit[2] = 1; geoDataSplit[2] <= 2; geoDataSplit[2]++)

                    {


                        if (counter == geoDataSplit[2]) {

                            latlng = new google.maps.LatLng(parseFloat(geoDataSplit[0]), parseFloat(geoDataSplit[1]));
                            places.push(latlng);

                            bermudaTriangle = new google.maps.Polygon({
                                paths: places,
                                strokeColor: "#FF0000",
                                strokeOpacity: 0.8,
                                strokeWeight: 2,
                                fillColor: "#FF0000",
                                fillOpacity: 0.35
                            });
                        }
                    }
                }
                bermudaTriangle.setMap(map);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>


  <body style="font-family: Arial; border: 0 none;">
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="selPoly" runat="server"></asp:ListBox>
    </div>
    </form>

    <div id="map_canvas" style="width: 1024px; height: 768px"></div>
  </body>

preguntado el 12 de junio de 12 a las 22:06

What are the exact values returned by var coords = document.getElementById("selPoly") -

are combinatins of lat/lngs and Id, for example 19.4646565,-99.43435353,1 so i make the split to get each value -

1 Respuestas

Drawing polygons is drawing lines between points (the subsequent points you give, and possibly the first and last point on your list). When they enclose a space - you get a polygon and the space is filled with colour. The line is always there between the two subsequent points.

If you want separate polygons, you have to CREATE separate polygons (with new google.maps.Polygon). If all you get is a list of points, it is up to you to come up with or find an algorithm to detect that the space is already enclosed, and a new Polygon should be created.

By the way, with the algoritm as is now, the new google.maps.Polygon line could (and probably should) be pushed down, outside of the loop, in line preceding bermudaTriangle.setMap(map);

OH WAIT THERE ACTUALLY IS A SOLUTION. Or a half-solution at least. You can make the lines invisible (strokeOpacity: 0). The polygons will still be visible because of their filling, more or less like this: enter image description here

respondido 09 mar '13, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.