Question

如何在kml图层后面渲染多边形？

我将一个kml图层导入到我的Google地图画布中。另外，我已经实现了一个多边形，只要你点击 Draw ，它就会在画布上绘制。

问题在于，当您单击绘制时，多边形将绘制在kml标记之上。因此，我无法单击任何标记并可视化其各自的名称。换句话说，我希望能够知道绘制的多边形中包含哪些标记，为此我需要单击标记并查看其对应的名称。

我相信解决方案在于使用窗格。我知道窗格及其排列顺序，但我不知道如何使用它们来实现解决方案。

接下来，我几乎完全按照我的要求包含我的代码，这样你就可以看到我在说什么并自己测试一下。唯一的区别是我没有包含GoogleMaps的密钥，所以在您看到 API_KEY 的情况下，请替换您自己的密钥。提前谢谢。

HTML：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry"></script>
<script src="GoogleMapTEST.js"></script>

<style>
    html{ 
    height:100%; 
    margin:0; 
    padding:0;
    }
    body{
    height:60%;
    font-family:'Trebuchet MS',  'Arial', 'Helvetica', 'sans-serif';
    font-size:10pt;
    background-color: LightGray;
    line-height:1.6em;
    }
    #map-canvas {
    width:80%;
    height:500px;
    margin-left: auto;  
    margin-right: auto; 
    margin-top: 50px;   
    margin-bottom: 25px;
    }
    .col2{
    border: #bfbfbf 1px solid;
    vertical-align: middle;
    display: inline;
    width: 39%;
    height: 90px;
    margin-left: 4%;
    }
</style>

<div id="map-canvas"></div>                                                       

<div>
    <form>
        <fieldset class="col2">
            Search radius (km): <br><br>
            <input type="text" id="DrawTxt" value="30">
            <input type="button" id="DrawBtn" value="Draw">
        </fieldset>
    </form>
</div>

使用Javascript：

var map;
var overlays_array = [];                                                            

function initialize()                                                               
{
    var MyLatLng = new google.maps.LatLng(51,-114);                         
    var mapOptions = {                                                              
        center: MyLatLng,
        zoom: 10
    };

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

    $("#DrawBtn").click( function(){                                                
        ClearOverlays();                                                            
        var radius = $("#DrawTxt").val();                                           
        var circle = DrawCircle(map.getCenter(), radius);                            
        AddOverlay(circle);                                                         
    });

    var CP_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEd04za21sMXZYaEE'      
    var CP_options = {
        preserveViewport: true,                                                                     
        map: map                                                                                    
    };
    var CP_layer = new google.maps.KmlLayer(CP_url, CP_options);                                    
}

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

function DrawCircle(center, radius)
{
    var nodes = 72;

    var latConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat()+0.1, center.lng()) )/100;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat(), center.lng()+0.1) )/100;

    var points = [];
    var step = parseInt(360/nodes)||10;

    for(var i=0; i<=360; i+=step)
    {
        var pint = new google.maps.LatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() + (radius/lngConv * Math.sin(i * Math.PI/180)));
        points.push(pint);
    }
    points.push(points[0]); 

    var poly = new google.maps.Polygon({
        paths: points,
        strokeColor: "#00A2FF",                               
        strokeOpacity: 0,                                     
        strokeWeight: 0,                                      
        fillColor: "#80D0FF",                                 
        fillOpacity: 0.3                                      
    });

    return poly;                                              
}

function AddOverlay(overlay)                                  
{
    if(overlay)
    {
        overlay.setMap(map);                                  
        overlays_array.push(overlay);                         
    }
}

function ClearOverlays()                                      
{
    while(overlays_array[0])                                  
    {
        overlays_array.pop().setMap(null);                    
    }
}

Answer 1

一个选项（如果您的kml不太复杂）将使用第三方解析器（如geoxml3或geoxml-v3）将KML渲染为普通的Google Maps Javascript API对象，然后您可以控制它们关于圆圈的排序。

example

<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script>
function initialize() {
  var MyLatLng = new google.maps.LatLng(51,-114);                         
  var mapOptions = {                                                              
    center: MyLatLng,
    zoom: 10
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);    
  geoXml = new geoXML3.parser({
              map: map,
              infoWindow: infowindow,
              singleInfoWindow: true,
              markerOptions: {optimized: false}
          });
 geoXml.parse("http://www.geocodezip.com/geoxml3_test/kml/CPs_Calgary.kml");
// ...

example with 494 markers

example with 839 markers

Google Maps API：多边形顶部的kml

1 个答案: