javascript - Google Maps API V3 - KML 图层与 JS 创建的多边形

Question

我带着更多我一直在做的 Google map 工作回来了。情况如下:

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

我还尝试通过在相邻州上绘制多边形并在其上添加不透明度为 75% 的白色图层来“涂白”相邻州，以使弗吉尼亚州更加突出。

但是，我遇到了一个问题，如果 KML 图层中的标记“重叠”到覆盖边界状态的多边形上，则不透明多边形会覆盖该图层，并且标记将变得不可单击。如果放大得足够大，就可以单击标记，但我希望人们能够在原始缩放中单击标记。

我尝试先制作标记，然后添加 KML，然后先制作 KML，然后绘制多边形，但这似乎并不重要。我什至在这里尝试了解决方案的变体:Handle when drawing of polygons is complete in google maps api v3我在其中放置触发器以在监听器事件内添加 KML 图层，但仍然没有骰子。

我在 Google 上的搜索也没有找到任何看起来有用的东西。我不知道这是否仍然是图层排序顺序的问题，或者多边形是否以某种方式“覆盖”KML 图层(无论顺序如何)，或者是否有某种方法可以明确告诉 KML 标记保持不变在多边形的顶部。

首先，这是我现在用来绘制图层的主要代码:

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;

接下来，这是我用来绘制多边形的代码示例。当我调用上面的 borderingStates 函数时会发生这种情况:

//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);

然后我重复为每个州绘制一个多边形 - 我认为有 6 或 7 个。

除了 Google map 固有地处理多边形和 KML 图层的方式之外，我无法判断该代码有任何特殊之处不会导致其工作。

Answer 1

我建议也使用 KmlLayer(或 FusionTablesLayer)制作多边形。您可以通过将图层添加到 map 的顺序来控制图层的顺序(第一个位于底部)。我相信原生 Google Maps API v3 多边形将始终出现在图层之上。您的另一个选择是使多边形“不可点击”(可点击: false)[不确定这是否有效]。