尝试将 kml 图层添加到谷歌地图

Trying to add kml layer to google maps

本文关键字：添加 谷歌地图 图层 kml      更新时间：2023-09-26

嗨，我正在开发一个小型Web应用程序，该应用程序使用Google maps java脚本API来显示地图。我正在传入纬度和经度的html5对象，以在地图上放置一个标记，显示用户的当前位置。我也有一个 kml 图层，我也要传入。我正在尝试显示与我的 kml 图层相关的当前用户位置。好吧，我真的希望同时显示kml图层和当前用户位置。我一直在尝试遵循谷歌地图 API 来启动并运行它。我能够在一个测试应用程序中显示的 kml 图层，然后在另一个测试应用程序中显示当前用户位置。当我尝试将两者结合起来时，kml 图层停止显示。这是一个使用Express js的节点js应用程序。我知道 kml 图层元素在本地主机上不起作用，我正在部署到 heroku 上的测试位置。下面我包含了我的相关代码：

<section id="wrapper">
Click the allow button to let the browser find your location.
<script src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEMAPDEVKEY&sensor=true"> </script>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var centerLL = new google.maps.LatLng(33.439346,-86.88312500000001);
var options = {
zoom: 15,
center: centerLL,
mapTypeControl: false,
navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 
var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title:"You are here!"
});
var georssLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE'
});
georssLayer.setMap(map);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
提前

感谢您抽出宝贵时间。

真诚地弗雷德克

编辑：我更改了src脚本标签以删除我在控制台上收到的关于有太多谷歌api src的错误

您使用了错误的网址。

这是一张地图： https://www.google.com/maps/d/edit?mid=zrvhKWbQZI6E.kyr3RvQ9DprE

如果我下载 KML(并选择选项"使用网络链接 KML 保持最新状态(只能在线使用(;其中的链接是：

http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&lid=zrvhKWbQZI6E.kNpsmD-YyCYc

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&amp;lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
    google.maps.event.addListener(georssLayer, 'status_changed', function(){
        document.getElementById('info').innerHTML = georssLayer.getStatus();
    });

}
google.maps.event.addDomListener(window, "load", initialize);

将其作为 KmlLayer 的 URL 包含在内，它对我有用

工作代码片段：

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
var georssLayer = new google.maps.KmlLayer({
url: 'http://mapsengine.google.com/map/kml?mid=zrvhKWbQZI6E.kyr3RvQ9DprE&amp;lid=zrvhKWbQZI6E.kNpsmD-YyCYc'
});
georssLayer.setMap(map);
    google.maps.event.addListener(georssLayer, 'status_changed', function(){
        document.getElementById('info').innerHTML = georssLayer.getStatus();
    });
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="info"></div>

相关文章：