谷歌地图呈现谷歌地球的KML反相

Question

我一直在努力解决如何谷歌地图呈现KML多边形的问题。在大地，它正确地呈现多边形是这样的：

但在谷歌地图，当我加入这个地图，它错误地看起来是这样的：

出人意料的是，这是由32点是横跨非洲，不是太平洋！

为什么在这个世界里，当我特别指出要点时，这是呈现相反的状态？它只是简单地忽略它们？

我创建了一个的jsfiddle这个位置：https://jsfiddle.net/qsz5ec5y/1/

KML文件是在这里：https://dl.dropboxusercontent.com/u/27946381/testzone.kml

任何想法，为什么发生这种情况？

谢谢！

Answer 1

我要说的是谷歌地图的KML解析器被打破。

Your bug report on the issues list

您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 

fiddle showing points above

您的KML也适用于geoxml3 (which renders it as native google.maps.Polygon objects)（如果您加载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>