问题描述
如何在kml图层后显示多边形?
我有一个导入到Google Maps画布的kml图层。此外,我已经实现了一个多边形,当您单击 Draw 时,该多边形将在画布上绘制。
问题是,当您单击绘制多边形绘制在kml标记的顶部。因此,我无法点击任何标记并将其各自的名称可视化。换句话说,我希望能够知道绘制的多边形中包含哪些标记,为此我需要单击标记并查看其相应的名称。
为了追踪,我包括我的代码几乎和我的代码完全一样,所以你可以看到我在说什么并自己测试它。唯一的区别是我不包括GoogleMaps的密钥,因此您在 API_KEY 的位置替换自己的密钥。提前致谢。
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
{
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不太复杂)将使用第三方解析器(如或,那么您可以控制他们对圆圈的排序。
< 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!