在将javascript API加载到Google地图时未显示KML [英] KML not shown when loaded with javascript API to google maps
问题描述
我想使用GoogleMaps提供的API加载KML文件，但无法使其正常工作.
I want to load a KML file with the API provided by GoogleMaps, but can't make it work.
我有一个KML文件，该文件可以正常工作并在从计算机手动加载到GoogleMaps时显示所有点.但是，当我尝试使用API时，它不起作用.我已将文件上传到Google驱动器，并且正在使用Google提供的示例(我仅更改坐标，文件和API密钥). 我在做什么错了?
I have a KML file that works correctly and displays all the points when loaded manually from my computer to GoogleMaps. However, when I try to do it with the API, it doesn't work. I uploaded my file to Google drive and I am using the example provided by Google (I only change coordinates, file and API key). What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.45, lng: -3.8}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
georssLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/open?id=15OVgNwtVbLVARkHJD3F8P_bEfG9oJ4Lu',
});
georssLayer.setMap(map);
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<title>GeoRSS Layers</title>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
推荐答案
您使用的Google云端硬盘链接未提供原始KML.
如果在加载KmlLayer后检查其状态，则会显示INVALID_DOCUMENT(小提琴，请检查JavaScript控制台)
The link to Google Drive you are using does not provide the raw KML.
If I check the status of the KmlLayer after it loads, I get INVALID_DOCUMENT (fiddle, check the javascript console)
每个文章:直接链接到Dropbox，Google Drive和OneDrive上的文件:
Google云端硬盘直接下载链接
从原始链接中获取文件ID(从共享设置中获取共享链接)，并将其附加到新链接的末尾.使用新格式，您共享的任何链接都会自动下载到收件人的计算机上.例如:
Google Drive direct download links
Grab the file ID from the original link (get the share link from the sharing settings) and append it to the end of the new link. With the new format, any link you share will automatically download to your recipient’s computer. For example:
https://drive.google.com/file/d /FILE_ID/edit?usp =共享
成为:
https://drive.google.com/uc?export=download& ; id = FILE_ID
在您的情况下:
url: 'https://drive.google.com/file/d/1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
成为:
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 40.45,
lng: -3.8
}
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://drive.google.com/uc?export=download&id=1rvb4xvwAZGj4gwrQLH7mjZtPBGzv97WQ',
});
google.maps.event.addListener(georssLayer, 'status_changed', function() {
console.log(georssLayer.getStatus());
})
georssLayer.setMap(map);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
这篇关于在将javascript API加载到Google地图时未显示KML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
