Google 地图 API KMZ 文件在单击事件时显示错误数据

Question

我有一个 KMZ 文件，我使用 javascript 通过 link 加载到我的 google 地图应用程序中。该文件在 Google Earth 中完美运行。当我单击多个元素（区域）之一时，问题出在我的应用程序中：返回的描述数据始终仅来自其中一个元素，而不显示实际单击的正确元素。这是我试过的：

检查地图中的点击事件是否正确，在点击的位置放置一个标记，是正确的。
使用 Google 地球将数据转换为 KML，将其作为 public 放入我的 google 驱动器，并使用直接下载 link来自我的应用程序中的 google 驱动器。它显示了数据，但错误继续。
仅使用图层创建了最多 basic/blank 的应用程序，以确保我的其他应用程序中的任何其他内容都在干扰。也没用。

文件在此网站中：https://www.voanaboa.pt/codigo-drone 命名为“Regulamento RPA_ver_5.0.kmz”

这是使用 kmz 文件创建基本应用程序的唯一文件，出于隐私考虑，我删除了我的 API 密钥。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });

    var kmlLayer = new google.maps.KmlLayer();
    var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
    var kmlLayer = new google.maps.KmlLayer(src, {
        //suppressInfoWindows: true,
        preserveViewport: false,
        map: map
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>

Answer 1

您的大部分（但不是全部）地标具有相同的 ID "ID_00000")。如果我将其更改为唯一的，多边形的描述将变得唯一：

example with unique ids

根据 KML reference, that doesn't have to be unique (it is a "stanard XML ID"，但我猜渲染代码假设它是。

带有更新的 kmz 文件的代码片段：

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });

    var kmlLayer = new google.maps.KmlLayer();
    var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
    var kmlLayer = new google.maps.KmlLayer(src, {
      //suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>

Google 地图 API KMZ 文件在单击事件时显示错误数据

Google Maps API KMZ file displaying wrong data on click event

javascript

file

maps

kml

kmz