Google Maps Renders KML обратный к Google Планета Земля

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 сломана.

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>