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

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

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

  1. google.maps.Marker я мог разместить на краях своего "региона".
  2. Артефакт, сгенерированный кодом 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);

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

Если вы хотите взглянуть на карту и связанные с ней скрипты, вы можете найти их здесь. Фрагмент кода находится в 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.

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

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


google-maps javascript google-maps-api-3 polygon projection
person Silver Quettier    schedule 09.01.2012    source источник
comment
Я полагаю, что вы используете path в свойствах полигона, хотя на самом деле это должно быть paths В противном случае было бы полезно увидеть где-нибудь живой код. Привет, Андрес   -  person andresf    schedule 10.01.2012
comment
Я нашел место для загрузки копии карты и соответствующего кода. Ссылка есть в вопросе. Если есть какой-либо тест, который вы хотели бы, чтобы я провел, пожалуйста, спросите. :)   -  person Silver Quettier    schedule 11.01.2012
comment
Можете ли вы опубликовать немного меньший образец, который воспроизводит это, или, по крайней мере, указать нам код Google Maps в вашем образце? Я теряюсь во всех файлах JavaScript...   -  person bamnet    schedule 13.01.2012
comment
@bamnet Извините, я не включил это в свое последнее редактирование. Часть кода, которую вы ищете, находится в Scripts/tectonicus.js, начиная со строки 659. Редактирование основного сообщения с этим.   -  person Silver Quettier    schedule 13.01.2012
comment
Я просмотрел объекты с помощью консоли FireBug. Добавил свои результаты в ОП. Мне нет смысла, все должно работать.   -  person Silver Quettier    schedule 16.01.2012
comment
Взглянув на это еще немного, я думаю, что ваша пользовательская проекция (независимо от того, что вы используете для проекции Minecraft) - это то, что дает вам странное поведение. Координаты вашего многоугольника кажутся действительно странными. Дельта между долготами составляет различные градусы, а дельта в широтах - десятичные дроби. Я предлагаю использовать следующий код, чтобы увидеть, как координаты на самом деле не следуют стандартной логике север/юго-восток/запад на вашей карте. --- google.maps.event.addListener(map, 'click', function(e) { alert(e.latLng.lat()+', '+e.latLng.lng()); });   -  person andresf    schedule 20.01.2012
comment
Я просмотрел координаты, и это плоский узкий многоугольник возле экватора. В настоящее время я изучаю, связано ли это с изометрической проекцией, вызванной tecMap. В идеале необходимо добавить ведение журнала для точки и thisLatLng.   -  person Stephen Quan    schedule 21.01.2012
comment
@BicycleDude - я добавил запись для точки и thisLatLng, как вы и просили. Я все больше и больше убеждаюсь, что это действительно связано с проекцией.   -  person Silver Quettier    schedule 21.01.2012

Ответы (2)


arrow_upward
4
arrow_downward

Хм, я посмотрел на это дальше, и я действительно вижу этот серебряный полигон. Если вы обратите внимание на свои широты, они очень близки к 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;

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

Затем я рекомендую вам просмотреть систему координат в вашем приложении. Если вы можете выбрать новые координаты, вы можете избежать возникновения таких краевых условий.

person Stephen Quan    schedule 20.01.2012
comment
Я думаю, что функции Google закрывают полигон автоматически, если не указана последняя координата. Спасибо, что поделились своими идеями и кодом. Я продолжу некоторые исследования. +1, потому что вы потратили на это некоторое время. :) - person Silver Quettier; 22.01.2012
comment
Спасибо @SilverFXQuettier. Я добавил дополнительные исследования для вас. - person Stephen Quan; 22.01.2012
comment
Чего я не понимаю, так это почему эти координаты thisLatLng можно использовать для размещения маркера в предполагаемом месте, несмотря на странный атрибут x. :/ - person Silver Quettier; 22.01.2012
comment
Спасибо @SilverFxQuettier. Я полностью пересмотрел свой анализ и значительно обновил свой ответ. В этой версии я теперь полностью согласен с вашим алгоритмом. Я переключил внимание на проекцию Minecraft и возможные проблемы с системой координат. - person Stephen Quan; 22.01.2012
comment
По крайней мере, мы движемся в правильном направлении. Я не тот, кто написал оригинальный прогноз (все это расширение для Tectonicus) и переслал эту информацию автору. Я попытался немного поиграть с проекцией, но пока ничего интересного не получил — подробности см. В ОП. - person Silver Quettier; 24.01.2012
comment
Да, я придумал какие-то безумные координаты, но красная линия все еще не сдвинулась с места. Затем я установил какой-то безумный strokeWeight, я думаю, что использовал 20, затем линия изменилась, но она все еще выглядит странно. Я не мог объяснить, почти такое ощущение, что происходит драматическое отсечение широты. - person Stephen Quan; 24.01.2012

arrow_upward
0
arrow_downward

Я заметил, что вы передаете 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);
}
person Simon East    schedule 21.01.2012
comment
Здравствуйте, Саймон. К сожалению, да, проблема возникает независимо от того, использую ли я атрибут path (один массив) или paths (массив массивов), и установлена ​​ли карта в конструкторе или через функцию setMap(). Спасибо, что заглянули таким образом :) - person Silver Quettier; 21.01.2012