GoogleMaps API：在多边形之上的kml [英] GoogleMaps API: kml on top of polygon
问题描述
如何在kml图层后显示多边形？
我有一个导入到Google Maps画布的kml图层。此外，我已经实现了一个多边形，当您单击 Draw 时，该多边形将在画布上绘制。
问题是，当您单击绘制多边形绘制在kml标记的顶部。因此，我无法点击任何标记并将其各自的名称可视化。换句话说，我希望能够知道绘制的多边形中包含哪些标记，为此我需要单击标记并查看其相应的名称。
<我相信解决方案在于使用窗格。我知道窗格以及它们的排列顺序，但我不知道如何使用它们来实现解决方案。
为了追踪，我包括我的代码几乎和我的代码完全一样，所以你可以看到我在说什么并自己测试它。唯一的区别是我不包括GoogleMaps的密钥，因此您在 API_KEY 的位置替换自己的密钥。提前致谢。
jsfiddle p>
HTML：
< script src =http：// ajax .aspnetcdn.com / ajax / jQuery / jquery-1.8.1.min.jstype =text / javascript>< / script>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry>< / script>
< script src =GoogleMapTEST.js>< / script>
< style>
html {
height：100％;
保证金：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;
宽度：39％;
height：90px;
保证金余额：4％;
}
< / style>
< div id =map-canvas>< / div>
< div>
< form>
< fieldset class =col2>
搜寻半径（公里）：< br>< br>
< input type =textid =DrawTxtvalue =30>
< input type =buttonid =DrawBtnvalue =Draw>
< / fieldset>
< / form>
< / div>
Javascript：
var map;
var overlays_array = [];
函数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）;
函数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; （变量i = 0; i <= 360; i + =步骤）
{
var pint = new google.maps.LatLng（center.lat（）+（半径/ latConv * Math.cos（i * Math.PI / 180）），center.lng（）+（radius / lngConv * Math.sin（i * Math.PI / 180）））;
points.push（品脱）;
}
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;
函数AddOverlay（overlay）
{
if（overlay）
{
overlay.setMap（map）;
overlays_array.push（overlay）;
函数ClearOverlays（）
{
while（overlays_array [0]）
{
overlays_array.pop （）.setMap（NULL）;
}
}
One选项（如果您的kml不太复杂）将使用第三方解析器（如 geoxml3 或 geoxml-v3 ，那么您可以控制他们对圆圈的排序。
< script type =text / javascriptsrc =http：// geoxml3 .googlecode.com / SVN /支链/多边形/ geoxml3.js>< /脚本>
< script>
函数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）;
// ...
How can I render my polygon behind the kml layer?
I have a kml layer imported into my Google Maps canvas. Also, I have implemented a polygon, which is drawn on the canvas whenever you click Draw.
The issue is that when you click Draw the polygon is drawn on top of the kml markers. Thus, I cannot click any marker and visualize their respective names. In other words, I would like to be able to know which markers are included inside the drawn polygon, and for that I would need to click the marker and see its corresponding name.
I believe the solution lies in using panes. I am aware of panes and the order in which they are arranged, but I don't know how to implement a solution using them.
To follow, I'm including my code almost exactly as I have it, so you can see what I am talking about and test it yourself. The only difference is that I'm not including my key for GoogleMaps, so where you see API_KEY, replace for your own key. Thanks in advance.
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);
}
}
One option (if your kml is not too complex) would be to render the KML as normal Google Maps Javascript API objects using a third party parser like geoxml3 or geoxml-v3, then you can control their ordering with respect to the circle.
<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");
// ...
这篇关于GoogleMaps API：在多边形之上的kml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
