谷歌地圖呈現谷歌地球的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>