Google Maps API V3-KML圖層與JS創建的多邊形

Question

我將繼續從事有關Google Map的更多工作。 情況如下：

我有弗吉尼亞州的地圖。 它會有標記，但是我需要幾個人來添加/刪除/編輯標記。 結果，我在“我的位置”中創建了Google地圖，並將生成的KML文件導入到要加載到API的地圖中。

我還試圖通過在相鄰州上繪制多邊形並在其上添加白色層（不透明度為75％）來“遮蓋”相鄰州，以使弗吉尼亞州更加突出。

但是，我遇到了一個問題，如果KML圖層中的標記“重疊”到覆蓋邊界狀態的多邊形上，則不透明的多邊形會覆蓋該圖層，並且標記變得不可點擊。 如果一個人足夠放大，則可以單擊該標記，但是我希望人們能夠從原始縮放中單擊該標記。

我嘗試過先制作標記，然后添加KML，然后先進行KML，然后再繪制多邊形，但這似乎並不重要。 我什至在這里嘗試了該解決方案的變體： 在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圖層的方式之外，我無法說出任何與代碼無關的事情，這些都不會導致代碼正常工作。

Answer 1

我建議您也使用KmlLayer（或FusionTablesLayer）制作多邊形。 您可以通過將圖層添加到地圖的順序來控制圖層的順序（第一個在底部）。 我相信原生Google Maps API v3多邊形將始終顯示在圖層上方。 您的另一個選擇是使多邊形“不可點擊”（可點擊：false）[不確定是否可以使用]。

Answer 2

這是我的第一次提交，冒着被標記為牛仔的危險，這是我對這個問題的解決方案：

1. 在首次點擊事件中刪除多邊形
2. 設置計時器以恢復多邊形（1 1/2秒后）
3. 在機會窗口的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元素單擊事件，但在我們的情況下，這很好。