Google 地图 API KMZ 文件在单击事件时显示错误数据
Google Maps API KMZ file displaying wrong data on click event
我有一个 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>
您的大部分(但不是全部)地标具有相同的 ID "ID_00000")。如果我将其更改为唯一的,多边形的描述将变得唯一:
根据 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>
我有一个 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>
您的大部分(但不是全部)地标具有相同的 ID "ID_00000")。如果我将其更改为唯一的,多边形的描述将变得唯一:
根据 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>