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

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

12 голосов
/ 10 января 2012

Примерно неделю назад я столкнулся с проблемой: на пользовательской карте с поддержкой 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);

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

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

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

Ответы [ 2 ]

4 голосов
/ 21 января 2012

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

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

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

0 голосов
/ 21 января 2012

Я заметил, что вы передаете 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);
}
...