Google Maps呈现Google Earth的KML逆

Question

我一直在努力解决Google地图如何渲染KML多边形的问题。 在“好地球”中，它可以像这样正确地渲染多边形：

但是在Google地图中，当我将其添加到地图中时，它看起来不正确，如下所示：

令人惊讶的是，这是由32个点组成的，这些点遍布非洲，而不是太平洋！

当我特别指出要点时，为什么这在世界上是相反的？ 只是简单地忽略它们吗？

我为此在这里创建了一个JSFiddle： https ：//jsfiddle.net/qsz5ec5y/1/

KML文件在此处： https : //dl.dropboxusercontent.com/u/27946381/testzone.kml

有什么想法为什么会这样？

谢谢！

Answer 1

我想说Google Maps KML解析器坏了。

您在问题列表上的错误报告

您的KML有一个定义明确的多边形，每边各有几个点（应该足以告诉它多边形的方向）：

142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347

摆弄上面的要点

您的KML还可以在geoxml3中工作（它将其呈现为本地google.maps.Polygon对象） （如果加载KmlLayer，则可以看到问题）

代码片段，显示以KML和“正常” google.maps.Polygon呈现的矩形：

 var geocoder; var map; var ctaLayer; var poly; function initialize() { 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 bounds = new google.maps.LatLngBounds(); var path = []; var coordsStr = kmlCoords.split(" "); for (var i = 0; i < coordsStr.length; i++) { var coords = coordsStr[i].split(','); var latLng = new google.maps.LatLng(coords[1], coords[0]); path.push(latLng); bounds.extend(latLng); var marker = new google.maps.Marker({ position: latLng, map: map, title: latLng.toUrlValue(6) }); } map.fitBounds(bounds); poly = new google.maps.Polygon({ path: path, map: map }); ctaLayer = new google.maps.KmlLayer({ url: 'https://dl.dropboxusercontent.com/u/27946381/testzone.kml' }); ctaLayer.setMap(map); } google.maps.event.addDomListener(window, "load", initialize); function toggleKml() { if (ctaLayer.getMap() == null) { ctaLayer.setMap(map); } else { ctaLayer.setMap(null); } } function togglePolygon() { if (poly.getMap() == null) { poly.setMap(map); } else { poly.setMap(null); } } var kmlCoords = "142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347"; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <input type="button" onclick="toggleKml();" value="toggle KML" /> <input type="button" onclick="togglePolygon();" value="toggle Polygon" /> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div>