Question

您好我正在使用Google地图java脚本API来显示地图的小型网络应用程序。我传入经纬度的html5对象，在地图上放置一个标记，显示用户的当前位置。我有一个我传入的kml层。我正在尝试显示与我的kml图层相关的当前用户位置。嗯，我真的只想显示kml图层和当前用户位置。我一直在尝试按照谷歌地图API来启动和运行。我能够在一个测试应用程序中显示kml图层，然后我将当前用户位置显示在另一个测试应用程序中。当我试图将两者结合起来时，kml层停止显示。这是使用express js的节点js app。我知道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脚本标记，以删除我在控制台上遇到的有关太多google api src＆＃39>

的错误

Answer 1

您使用的是错误的网址。

这是一张地图：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);

Include that as the URL for the KmlLayer and it works for me

工作代码段：

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>

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

1 个答案: