Question

我们正在尝试在港口之间绘制海上航线，因为我们用坐标

生成了kml

如果路线小于180度（不超过12个时区），则可以使用。

例如：

哥斯达黎加到印度

Image Route: Costa Rica -> India

如果路线超过180度，则会错误地绘制。

Image Route: Costa Rica -> India -> Japon

有谁知道如何解决这个问题？

在此网址中，您可以看到示例：

http://lsanabria.000webhostapp.com/MapFail.html

http://lsanabria.000webhostapp.com/MapOK.html

这些是使用的kmls

http://lsanabria.000webhostapp.com/RouteFail.kml

http://lsanabria.000webhostapp.com/RouteOk.kml

他们在谷歌地球上进行了测试，两者都显示正常。

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

Answer 1

解决

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

在谷歌地图中绘制超过180度的线条

1 个答案: