Google Maps API V3 - KML 层与 JS 创建的多边形答案

【问题标题】：Google Maps API V3 - KML Layer vs. JS created PolygonsGoogle Maps API V3 - KML 层与 JS 创建的多边形
【发布时间】：2012-10-14 19:39:16
【问题描述】：

我回来做更多我一直在研究的 Google 地图工作。情况如下：

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

我还尝试通过在相邻州上绘制一个多边形并在其上添加一个不透明度为 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 Maps 固有地处理多边形和 KML 图层的方式之外，我不知道有什么特别的代码不会使其工作。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 kml

【解决方案1】：

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

【讨论】：

花了一些时间，但看起来像 KmlLayer（连同 suuppressInfoWindows: true）一样将它们作为多边形来处理。

【解决方案2】：

这是我的第一次提交，冒着被贴上牛仔标签的风险，这是我对这个问题的解决方案：

在第一次点击事件时移除多边形
设置计时器以恢复多边形（1 1/2 秒后）
在 1 1/2 秒的机会窗口期间捕获 KML 元素上的点击事件

google.maps.event.addListener(polygon, 'click', function () {
            polygon.setMap(null); // hide polygon for a 1 1/2 seconds           
            window.setTimeout(function () {
                polygon.setMap(map_canvas);
            }, 1500);
            // process polygon click now

        });

此方法确实意味着您将同时处理 Polygon 和 KML 元素点击事件，但在我们的例子中这很好。

【讨论】：