Как можно использовать LatLng для размещения маркеров на карте Google, но не для рисования многоугольника?

Примерно неделю назад у меня возникла проблема: на пользовательской карте, основанной на Google, мои полигоны не появлялись, в то время как маркеры для тех же координат полностью в порядке. Несмотря на мои усилия с API Карт Google, кажется, что я не могу найти причину.

Вот ссылка на скриншот карты. Фиолетовые стрелки и цифры - мое дополнение, они показывают:

google.maps.Marker Я мог бы разместить по краям моей "области".
Артефакт, созданный кодом google.maps.Polygon. Он красный, как ожидалось, но совершенно неуместен и странно плоский.

Вот часть кода, в котором генерируются маркеры и многоугольники:

var regionData = tecMap.regions[r];
var regionMapMarkers = new google.maps.MVCArray();

for (c in regionData.coords) {
    var point = projection.worldToMap(regionData.coords[c]);
    debugRegionPoints.push(point);
    var thisLatLng = projection.fromPointToLatLng(point);
    debugRegionLatLngs.push(thisLatLng);
    regionMapMarkers.push(thisLatLng);
}

regionMapMarkers.forEach(function(latLng, m){
    var marker = new google.maps.Marker({       
        position: latLng,
        map: map, 
        title: '',
        optimized: false
    });
    regionCorners.push(marker);
});

var paths = new google.maps.MVCArray();
paths.push(regionMapMarkers);

var region = new google.maps.Polygon({
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    paths: paths,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2     
});
regionPolys.push(region);

Если вам интересно о массиве массивов, все это наравне с API Javascript Google Maps.

Если вы хотите посмотреть на карту и связанные с ней сценарии, вы можете найти ее здесь. Фрагмент кода находится в Scripts/tectonicus.js, начиная с строки 659.

[Изменить] Некоторые сведения об отладке:

Кажется, это проблема рендеринга, а не "расчетная". С консоли firebug на карте, с которой я связан, оба

regionPolys[0].getPath().getArray();

for (i in regionCorners) {console.log(regionCorners[i].getPosition())};

вернет

P { Na=0.20123958504464223, Oa=-22.5249097921875}
P { Na=-0.21702715474330336, Oa=-32.7277467}
P { Na=0.19466306397879407, Oa=-37.51230686484375}
P { Na=0.12889785332031245, Oa=-49.04594858671875}

Если я прав, это означает, что они имеют одинаковые координаты, которые совпадают с кодом.

[Edit2] Новые достижения!

Кажется, что векторы имеют проблемы с обработкой при работе с настраиваемой проекцией, например, той, которая используется для отображения этой изометрической карты Minecraft. (Создано с Tectonicus)

После последних комментариев я добавляю к живому коду, связанному над двумя новыми массивами отладки, debugRegionLatLngs и debugRegionPoints. Выше кода обновляется, чтобы вы могли видеть, что они содержат.

[Edit3] Проецирование и координаты

Пересекая исследование BicycleDude с моим, теперь он почти уверен, что это обычная проекция, которая разрушает полигоны. Фактически существует возможная ошибка в API Google Карт.

Эта проекция используется, потому что карты Minecraft могут быть практически бесконечными и все же должны использовать gmap, который обертывается после 360 ° долготы. Также связан тот факт, что игровые координаты отображаются изометрическим образом, а gmaps ожидает нечто большее, чем проекция Меркатора.

Я попытался немного подстроить проекцию, но до сих пор не имел интересных результатов.

Ответ 1

Хм, я посмотрел на это дальше, и я вижу этот многоугольник. Если вы заметили свои широты, они очень близки к 0 градусам, что означает практически плоскую линию около экватора. Я подтвердил это сам, вставив ваши координаты в новый образец Google Maps, и они не кажутся пространственно расположенными с вашими маркерами, поэтому вам нужно просмотреть, где манипулировать информацией о координатах, извините, я знаю, что не сделал найдите свою проблему.

Я изменил образец треугольника Google Map Бермудский, чтобы использовать стиль кодирования. т.е. я принял ваши переменные и следил за духом вашего кода. В этом примере отображаются 3 маркера и рисуется многоугольник для треугольника Бермудских островов.

<!DOCTYPE html>
<html>
  <head>
    <title>Bermuda Hack Triangle</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      #map_canvas {
        width: 500px;
        height: 500px;
      }
    </style>
    <script type="text/javascript" scr="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var myoptions = {
            zoom: 4,
            center: new google.maps.LatLng(25, -70),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(
          document.getElementById('map_canvas'),
          myoptions
        );

        // Create pseudo coordinates
        var regionMapMarkers = new google.maps.MVCArray();
        var p1 = new google.maps.LatLng(25, -80);
        var p2 = new google.maps.LatLng(18, -66);
        var p3 = new google.maps.LatLng(32, -64);
        //p2.Qa += 360;
        //p3.Qa -= 360;
        regionMapMarkers.push(p1);
        regionMapMarkers.push(p2);
        regionMapMarkers.push(p3);
        console.log(JSON.stringify(regionMapMarkers));

        // Draw Markers
        regionMapMarkers.forEach(function(latLng, m){
            var marker = new google.maps.Marker(
            {        
            position: latLng,
            map: map, 
            title: '',
            optimized: false
            });
        });

        // Draw Polygon
        var region = new google.maps.Polygon({
          map: map,
          paths: regionMapMarkers,
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Работает образец. Если вы его запустили, вы получите треугольник Бермудских островов, окруженный маркерами. Тогда возникает вопрос, что на практике может повлиять на ваш алгоритм? До сих пор мы предполагали, что проект Minecraft что-то делает. Я все еще считаю, что это так.

Чтобы проверить эту теорию, я попытался разрушить образец треугольника Бермудских островов. Я попытался добавить и вычесть 360 градусов долготы до двух точек, раскомментируя следующие строки:

        p2.Qa += 360;
        p3.Qa -= 360;

Что он делает, так это то, что он по-прежнему позволяет помещать маркеры в одно и то же место, но заполнение многоугольника происходит абсолютно spacko. Я считаю, что это то, что происходит в вашем сценарии.

То, что я тогда рекомендую вам, - это просмотреть систему координат в своем приложении. Если вы можете выбрать новые координаты, вы можете избежать таких краевых условий.

Ответ 2

Я заметил, что вы передаете paths как MVCArray, который содержит другой MVCArray. Вы пробовали просто пропустить простой одномерный массив, например, в Google в документах?

И вам нужно вызвать setMap() или передать свойство map, чтобы сделать его рендерингом?

Ниже приведен пример кода Google Polygon()... (здесь)

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
}