【发布时间】：2021-05-28 16:28:26
【问题描述】：
我正在尝试使用 geoXML3.parser 的 createPolygon 选项来自定义从我的 KML 文件导入的多边形元素如何在我的地图（Google 地图 api v3）上呈现，但我在控制台中遇到错误，并且地图无法加载。这是一个最小的例子。
<!DOCTYPE html>
<html>
<head>
<title>GeoXML issue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
#map {
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/geoxml3/polys/geoxml3.js"></script>
<script type="text/javascript" src="/geoxml3/ProjectedOverlay.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
mapTypeId: 'roadmap'
});
var geoXml = new geoXML3.parser({
map: map,
createPolygon: myPolygons,
singleInfoWindow: true
});
geoXml.parse('myKml.kml');
function myPolygons(p) {
console.log("I'll do stuff here");
geoXml.createPolygon(p);
return p;
}
});
</script>
<div id="map"></div>
</body>
</html>
这是我的 kml 文件
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Folder>
<description><![CDATA[My KML]]></description>
<Placemark>
<name><![CDATA[41400]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-6.84733,53.360684,0
-7.312225,53.32858,0
-7.294876,53.294378,0
-7.225435,53.195982,0
-6.918459,53.183257,0
-6.792612,53.201241,0
-6.690876,53.292838,0
-6.647491,53.293932,0
-6.658125,53.344486,0
-6.84733,53.360684,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41403]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-7.717841,53.456508,0
-7.389035,53.446422,0
-6.892437,53.666006,0
-6.967472,53.698911,0
-7.082074,53.690988,0
-7.46291,53.86158,0
-7.650731,53.78538,0
-7.740906,53.788201,0
-7.717841,53.456508,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41402]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-6.658178,53.525725,0
-6.600668,53.530331,0
-6.892437,53.666006,0
-7.389035,53.446422,0
-6.658178,53.525725,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name><![CDATA[41401]]></name>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>FF000000</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<outline>1</outline>
<color>FFFFFFFF</color>
</PolyStyle>
</Style>
<Polygon>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>-7.389035,53.446422,0
-7.312225,53.32858,0
-6.84733,53.360684,0
-6.658125,53.344486,0
-6.620126,53.41344,0
-6.570206,53.428354,0
-6.562111,53.450037,0
-6.658178,53.525725,0
-7.389035,53.446422,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</kml>
这是发生错误时我的控制台的日志
map_test2.php:39 I'll do stuff here
js?v=3&key=#mykey#&libraries=places&sensor=false:100 Uncaught ge {message: "not a LatLngBounds or LatLngBoundsLiteral: not an Object", name: "InvalidValueError", stack: "Error↵ at new ge (https://maps.googleapis.com/m…/michael.ran.ie/geoxml3/polys/geoxml3.js:1189:11)"}message: "not a LatLngBounds or LatLngBoundsLiteral: not an Object"name: "InvalidValueError"stack: "Error\n at new ge (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:78:72)\n at Object._.he (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:78:182)\n at Object._.Tf (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:100:120)\n at _.Qf.union (https://maps.googleapis.com/maps/api/js?v=3&key=#mykey#&libraries=places&sensor=false:236:38)\n at render (https://michael.ran.ie/geoxml3/polys/geoxml3.js:529:23)\n at https://michael.ran.ie/geoxml3/polys/geoxml3.js:160:54\n at XMLHttpRequest.xhrFetcher.fetcher.onreadystatechange (https://michael.ran.ie/geoxml3/polys/geoxml3.js:1189:11)"__proto__: Error
_.Tf @ js?v=3&key=#mykey#&libraries=places&sensor=false:100
_.Qf.union @ js?v=3&key=#mykey#&libraries=places&sensor=false:236
render @ geoxml3.js:529
(anonymous) @ geoxml3.js:160
xhrFetcher.fetcher.onreadystatechange @ geoxml3.js:1189
XMLHttpRequest.send (async)
geoXML3.fetchXML @ geoxml3.js:1196
fetchDoc @ geoxml3.js:160
parse @ geoxml3.js:155
(anonymous) @ map_test2.php:36
n @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
如果我注释掉createPolygon 选项，或者确实注释掉myPolygons 中的geoXml.createPolygon(p) 行，则地图呈现良好。
这里有什么问题？我的代码错了吗？还是 kml 文件？
【问题讨论】：