Google地图上的多个多边形 - 无法使用,视为单个。使用JSP

时间:2015-04-10 05:45:26

标签: java javascript google-maps jsp google-maps-api-3

首先我想说的是,有几种同样的帖子,但在一天结束时我无法找到解决方案,比如,

Multiple Polygons on Google Maps - not working - joining up Multiple Polygon On Map Drawing Multiple Polygons on Google Maps API v3 from MySQL database

这是我的JS代码

<script>

    // This example creates a simple polygon representing the Bermuda Triangle.
    // Note that the code specifies only three LatLng coordinates for the
    // polygon. The API automatically draws a
    // stroke connecting the last LatLng back to the first LatLng.

    function initialize() {

        var polygons    =   [];
        var polyCoords  =   [];

        var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(22.978624, 87.747803)                    
        };

        <% 
        String[] companyLatLong=new String[polutionList.size()];

            for(int i=0;i<polutionList.size();i++){
                companyLatLong[i]   =   polutionList.get(i).getLatLong();
            }
                for(int k=0;k<companyLatLong.length;k++){
                    String multiLatLong[]   =   companyLatLong[k].split(",");
                    for(int j=0;j<multiLatLong.length;j++){
                        String latLong[]        =   multiLatLong[j].split(" ");
                        double lat              =   Double.parseDouble(latLong[0]);
                        double longi            =   Double.parseDouble(latLong[1]);
        %>

                polyCoords.push(new google.maps.LatLng(<%= lat%>, <%= longi%>));




          var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);


          polygons.push(new google.maps.Polygon({
                paths: polyCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
        <%
          }}
          %> 

          polygons[polygons.length-1].setMap(map);

        }

        google.maps.event.addDomListener(window, 'load', initialize);

</script>


<div id="map-canvas" style="width:500x;height:550px;"></div>

其中polutionList是数据的数组列表。目前的结果是

enter image description here

请帮帮我。我是Android开发人员,这对我来说很新。

1 个答案:

答案 0 :(得分:0)

我已经解决了这个问题,我需要每次单独声明多边形数组,例如,需要在循环内创建多边形数组。 看我的回答 -

<script>


    function initialize() {

        var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(22.978624, 87.747803)                    
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        <% 
            for(int i=0;i<polutionList.size();i++){
                String companyLatLong   =   polutionList.get(i).getLatLong();

                    String multiLatLong[]   =   companyLatLong.split(",");%>
                    var polyCoords  =   [];

                    <%for(int j=0;j<multiLatLong.length;j++){
                        String latLong[]        =   multiLatLong[j].split(" ");
                        double lat              =   Double.parseDouble(latLong[0]);
                        double longi            =   Double.parseDouble(latLong[1]);
                    %>

                polyCoords.push(new google.maps.LatLng(<%= lat%>, <%= longi%>));

                    <%
                      }
                    %> 


                var polygons =new google.maps.Polygon({
                        paths: polyCoords,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                    });
                  polygons.setMap(map);
        <%
        }
        %>

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>