javascript - 谷歌地图 API : kml on top of polygon

Question

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

我已将一个 KML 图层导入到我的 Google map Canvas 中。另外，我还实现了一个多边形，只要您单击绘制，就会在 Canvas 上绘制该多边形。

问题是，当您单击绘制时，多边形会绘制在 kml 标记的顶部。因此，我无法单击任何标记并可视化它们各自的名称。换句话说，我希望能够知道绘制的多边形内包含哪些标记，为此我需要单击该标记并查看其相应的名称。

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

接下来，我将几乎完全按照我的代码添加代码，这样您就可以看到我正在谈论的内容并自行测试。唯一的区别是我没有包含我的 GoogleMaps key ，因此在您看到 API_KEY 的地方，请替换为您自己的 key 。提前致谢。

jsfiddle

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)将 KML 渲染为正常的 Google Maps Javascript API 对象。或geoxml-v3 ，那么您可以控制它们相对于圆的顺序。

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