0

同じ Google マップに複数のポリゴンを描画したいのですが、リストボックスから緯度経度を読み取る必要があります。これらは次のようになっています。

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

右側の値 (1 または 2) に応じて、対応する latln を読み取り、ポリゴンを描画します。実際にこれを行っています。ループでポリゴンがペイントされますが、それらを接続する線があります。 ?,つまり、この接続線なしで多角形を描くにはどうすればよいですか?,どうもありがとう!!!

これが私のコードです：

    <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>
4

1 に答える 1

0

多角形の描画は、ポイント (指定した後続のポイント、場合によってはリストの最初と最後のポイント) 間に線を描画することです。それらがスペースを囲むと、多角形が得られ、スペースが色で塗りつぶされます。線は常に 2 つの後続の点の間にあります。

別々のポリゴンが必要な場合は、別々のポリゴンを作成する必要があります ( を使用new google.maps.Polygon)。ポイントのリストしか得られない場合は、スペースがすでに囲まれていることを検出するアルゴリズムを考え出すか、見つけるのはあなた次第であり、新しい Polygon を作成する必要があります。

ところで、現在のアルゴリズムでは、new google.maps.Polygon行をループの外側の前の行にプッシュすることができます (そしておそらくプッシュする必要があります) bermudaTriangle.setMap(map);

待ってください、実際には解決策があります。または、少なくとも半分の解決策。線を非表示にすることができます ( strokeOpacity: 0)。多かれ少なかれ次のように、塗りつぶされているため、ポリゴンは引き続き表示されます。 ここに画像の説明を入力

于 2013-03-09T11:53:17.007 に答える