Google地图呈现Google地球的KML反转

Question

我一直在努力解决谷歌地图如何渲染KML多边形的问题。在Good Earth中，它正确地渲染多边形：

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

令人惊讶的是，这是由非洲而非太平洋的32分组成的！

当我明确指出这些点时，为什么世界上的这个被反演？它只是忽略了它们吗？

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

KML文件位于：https://dl.dropboxusercontent.com/u/27946381/testzone.kml

有关为何发生这种情况的任何想法？

谢谢！

Answer 1

我想说Google Maps 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和＆＃34;正常＆＃34; google.maps.Polygon：

＆＃13;

＆＃13;

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";

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;