Google Maps API V3 - KML Layer vs. JS创建了Polygons [英] Google Maps API V3 - KML Layer vs. JS created Polygons

问题描述

我回来后在我一直在研究的Google Map上做了更多的工作。这是情况：

我有一张弗吉尼亚地图。它会有标记，但我需要几个人添加/删除/编辑标记。因此，我在我的地点创建了Google地图，并将生成的KML文件导入到我加载到API中的地图中。

I他还试图通过在他们身上画一个多边形并在他们身上添加一个白色层以75％的不透明度来消灭邻国，以使弗吉尼亚州更加突出。
$但是，我遇到了一个问题，即如果KML图层中的标记覆盖到覆盖边界状态的多边形上，则不透明多边形将覆盖该图层，并且标记变得无法点击。如果放大到足够大，可以点击标记，但我希望人们能够从原始缩放中点击标记。

我已经尝试制作标记首先，然后添加KML，首先执行KML然后绘制多边形，但似乎并不重要。我甚至在这里尝试了一个解决方案的变体：在Google地图api v3中绘制多边形时完成处理，在此处我将触发器在侦听器事件中添加KML层，但仍然没有骰子。

我在Google上搜索也没有让我看到任何有用的东西。我不知道这是否仍然是订购图层的顺序问题，或者多边形以某种方式覆盖了KML图层，而与订单无关，或者是否有某种方式可以明确告知KML标记留下来

首先，下面是我用来绘制图层的主要代码：

 函数初始化（）{
 var mapOptions = {
 zoom：7，
 center：new google.maps.LatLng（38， -79.5），
 disableDefaultUI：true，
 mapTypeId：google.maps.MapTypeId.TERRAIN 
} 
 var map = new google.maps.Map（document.getElementById（map_canvas ），mapOptions）; 
 
 borderingStates（地图）; 
 
 var participantsLayer = new google.maps.KmlLayer（'https://maps.google.com/maps/ms?msa=0&msid=204048902337864904598.0004cc332e8034251c1db&ie=UTF8&ll=37.668046， -80.289717&安培; SPN = 1.959603,5.642338&安培;输出= KML，{preserveViewport，用于：真}）; 
 
 google.maps.event.addListener（map，'idle'，function（）{
 participantsLayer.setMap（map）; 
}）; 
 
 
 $ b函数loadScript（）{
 var script = document.createElement（script）; 
 script.type =text / javascript; 
 script.src =https://maps.googleapis.com/maps/api/js?key=abc.def&sensor=false&callback=initialize; 
 document.body.appendChild（script）; 
} 
 
 window.onload = loadScript; 
  

接下来，这里是我用来绘制多边形的代码示例。这发生在我调用上面的borderingStates函数时：

$ b new google.maps.LatLng（39.7188，-75.7919），
new google.maps.LatLng（39.5210，-75.7837），
...
new google.maps.LatLng（ 39.8296，-75.6477），
new google.maps.LatLng（39.7199，-75.7906）
];

//构造多边形
var Delaware = new google.maps.Polygon（{
路径：DEpoints，
fillColor：invisColor，
strokeOpacity： 0，
fillOpacity：.75
}）;

Delaware.setMap（map）;

然后我再重复一遍，我画了一个多边形 - 我认为有6或7 。

我不能说有什么特别的关于代码的东西，除了Google地图固有地处理多边形和KML图层。

解决方案

我会建议使用KmlLayer（或FusionTablesLayer）制作多边形。
您可以按照将它们添加到地图中的顺序来控制图层的排序（第一个图层位于底部）。我相信，本地Google Maps API v3多边形将始终显示在图层之上。你的另一种选择是让Polygons不可点击（可点击：false）[不确定这是否可行]。

I'm back with more work on the Google Map that I've been working on. Here is the situation:

I have a map of Virginia. It will have markers in it, but I need the markers to be added/removed/editable by several people. As a result, I created a Google map in "My Places" and I'm importing the resulting KML file into a map I'm loading into the API.

I'm also trying to "white out" neighboring states by drawing a polygon over them and adding a white layer over them with 75% opacity, in order to make the state of Virginia stand out more.

However, I've run into a problem where if a marker from the KML layer "overlaps" onto the polygon covering a bordering state, the opaque polygon covers the layer AND the marker becomes unclickable. If one zooms in enough, one can click the marker, but I want people to be able to click the marker from the original zoom.

I've tried making the markers first, then adding the KML, and doing the KML first then drawing the polygons, but it doesn't seem to matter. I even tried a variation of the solution here: Handle when drawing of polygons is complete in google maps api v3 where I put the trigger to add the KML layer inside of the listener event, but still no dice.

My searching on Google also hasn't led me to anything that looks useful. I don't know if this is still a problem with the order the layers are being ordered, or if polygons somehow "override" a KML layer, regardless of the order, or if there is some way to explicitly tell the KML markers to stay on top of the polygons.

First off, here is the main code I'm using to draw the layers right now:

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(38, -79.5),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  borderingStates(map);

  var participantsLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?msa=0&msid=204048902337864904598.0004cc332e8034251c1db&ie=UTF8&ll=37.668046,-80.289717&spn=1.959603,5.642338&output=kml',{preserveViewport:true});

  google.maps.event.addListener(map,'idle', function() {
  participantsLayer.setMap(map);
 });

}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?key=abc.def&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

Next, here is an example of the code I'm using to draw the polygons. This happens when I call the borderingStates function above:

//Delaware
 DEpoints = [

new google.maps.LatLng(39.7188, -75.7919),
new google.maps.LatLng(39.5210, -75.7837),
...
new google.maps.LatLng(39.8296, -75.6477),
new google.maps.LatLng(39.7199, -75.7906)
];

  // Construct the polygon
  var Delaware = new google.maps.Polygon({
    paths: DEpoints,
    fillColor: invisColor,
    strokeOpacity: 0,
    fillOpacity: .75
  });

  Delaware.setMap(map);

And then I repeat that for each state I draw a polygon for - I think there are 6 or 7.

I can't tell that there is anything in particular about the code that wouldn't cause it to work other than perhaps how Google Maps inherently treats polygons and KML Layers.

解决方案

I would suggest making your polygons with KmlLayer (or FusionTablesLayer) as well. You can control the ordering of layers by the order that you add them to the map (first one is on the bottom). I believe native Google Maps API v3 Polygons will always appear above layers. Your other option would be to make the Polygons "unclickable" (clickable: false) [not sure if this will work or not].

这篇关于Google Maps API V3 - KML Layer vs. JS创建了Polygons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！