我编写了一个 R 脚本来创建一个 KML 文件,当在 Google 地球中查看时,下面生成的 KML 可以很好地加载 icon18.png:
<kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
<Document>
<name>Member locations</name>
<open>1</open>
<Folder>
<name>SpatialPointsDataFrame</name>
<Style id="pnt1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>1</name>
<styleUrl>#pnt1</styleUrl>
<Point>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>151.26250,-33.89374,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
但是,当使用地图 API 和以下代码加载到 KmlLayer 时,它会显示为默认的蓝色“泪珠”标记:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
在这里查看其他问题,我只能看到发布的问题没有未回答的代码,或者与未公开提供的 Web 服务器相关的一些问题。一些表明存在问题的问题现在可以了,所以我想支持将自定义图标加载到 KmlLayer 中,但我对 KML 格式或我加载它的方式有一些问题?
正如评论中所建议的,我刚刚将 KML 放置在此处的公开区域中:
http://www.peter-johnson.com.au/test.kml
这是HTML: