Desenhar linhas acima de 180 graus no google maps
Estamos a tentar traçar rotas marítimas entre portos, pois gerámos um kml com as coordenadas
Se a via for inferior a 180 graus (não exceder 12 fusos horários), tudo está bem.
por exemplo:
Costa Rica para a Índia
Image Route: Costa Rica - > Índia
Se a rota exceder 180 graus, é desenhada erroneamente.
Image Route: Costa Rica - > Índia - > Japão
Alguém faz ideia de como resolver isto?neste url você pode ver os exemplos:
Http://lsanabria.000webhostapp.com/MapFail.html
Http://lsanabria.000webhostapp.com/MapOK.html
Estes são os kmls usados
Http://lsanabria.000webhostapp.com/RouteFail.kml
Http://lsanabria.000webhostapp.com/RouteOk.kml
foram testados em o google earth e ambos são mostrados ok.
-- HTML:--
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map { height: 100%; }
html, body {height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"></div>
<div id="content-window"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://lsanabria.000webhostapp.com/RouteFail.kml',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
</script>
</body>
</html>
0
Author: geocodezip, 2017-11-01
1 answers
Resolvido
<body>
<div id="map"></div>
<div id="content-window"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
})
kml = new geoXML3.parser({map: map});
kml.parse('RouteFail.kml');
}
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"></script>
</body>
0
Author: Luis Sanabria Vega, 2017-11-02 15:24:46