Question

我回来了，我一直致力于谷歌地图上的更多工作。情况如下：

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

我也试图通过在它们上方绘制一个多边形并在其上面添加75％不透明度的白色图层来“遮挡”邻近状态，以使弗吉尼亚州的状态更加突出。

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

我已经尝试先制作标记，然后添加KML，然后首先绘制KML，然后绘制多边形，但这似乎并不重要。我甚至尝试了解决方案的变体：Handle when drawing of polygons is complete in google maps api v3我把触发器添加到侦听器事件中的KML层，但仍然没有骰子。

我在谷歌上的搜索也没有让我看到任何看起来有用的东西。我不知道这是否仍然是图层顺序排序的问题，或者多边形是否“覆盖”了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个。

我不能说除了谷歌地图本身如何处理多边形和KML图层之外，代码中没有任何特别之处不会使它起作用。

Answer 1

我建议您使用KmlLayer（或FusionTablesLayer）制作多边形。您可以按照将它们添加到地图的顺序来控制图层的顺序（第一个在底部）。我相信原生Google Maps API v3多边形将始终显示在图层上方。你的另一个选择是让多边形“无法点击”（可点击：假）[不确定这是否有效]。

Answer 2

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

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

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元素点击事件，但在我们的情况下，这很好。

Google Maps API V3 - KML Layer vs. JS创建了多边形

2 个答案: