Google Maps API KMZ 文件在点击事件中显示错误数据答案

【问题标题】：Google Maps API KMZ file displaying wrong data on click eventGoogle Maps API KMZ 文件在点击事件中显示错误数据
【发布时间】：2018-08-17 13:41:54
【问题描述】：

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

通过在点击的位置放置一个标记来检查地图中的点击事件是否正确，是正确的。
使用 Google 地球将数据转换为 KML，将其作为公共放入我的 google 驱动器，并在我的应用程序中使用来自 google 驱动器的直接下载链接。它显示了数据，但错误仍然存在。
仅使用该层创建了最基本的/空白应用程序，以确保我的其他应用程序中的其他任何内容都受到干扰。也没用。

文件在这个网站上：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>

【问题讨论】：

标签： javascript file maps kml kmz

【解决方案1】：

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

example with unique ids

根据KML reference，它必须是唯一的（它是“stanard XML ID”，但我猜渲染代码假设它是唯一的。

使用更新的 kmz 文件编写 sn-p 代码：

/* 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>

【讨论】：