Как рисовать google.maps.Polygon также красиво как ymaps.Polygon?

Question

[Денис]

Всем привет.

Яндекс апи позволяет красиво строить области, например webmap-blog.ru/examples/ymap-api-v2/mnogougolnik/e...

Для гугла нашёл пример web3o.blogspot.ru/2010/05/google-maps-dynamically-..., но как-то слишком много там "танцев с бубном".
Ещё вариант попроще

var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: false,
polygonOptions :{
                    fillColor: '#ff8888',
                    strokeColor: '#666666',
                    strokeWidth: 2,
                    draggable: true,
                    opacity: 0.5,
                    editable: true
}
});
  drawingManager.setMap(map);
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);

google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {
            polygon.setMap(map);
    });

Но всё-таки не совсем-то, как для ymaps.Polygon.
Как добиться такого же поведения в Гугл Апи?

Answer 1

[Roman Shcherbokov]

Приветствую, наткнулся на вопрос может уже и не актуально. Но мало ли пригодиться.

Я вот так делал

https://jsfiddle.net/n4tj5yj3/

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 53.905551719718574, lng: 27.55868911743164},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var MobilePoligon = function( map ) {

          //Линия
          var polyline = new google.maps.Polyline({
                  map: map,
                  strokeWeight: 2,
                  strokeColor: 'rgb(1, 1, 1)',
                  editable: true,
                  path: [] // Без указания координат
          });

          //Полигон
          var polygon = new google.maps.Polygon({
                  map: map,
                  strokeColor: 'rgb(1, 1, 1)',
                  strokeOpacity: 0.1,
                  strokeWeight: 2,
                  fillColor: 'rgb(1, 1, 1)',
                  fillOpacity: 0.2,
                  editable: true, 
                  paths: [] // Без указания координат
          });

          //Храним координаты
          var paths = polyline.getPath();

          //Сохраним первые координаты
          var firstClick = false;

          //Протягиваем линию 
          var updatePath = function( evt ){
             // Обьект координат
             var latLng = new google.maps.LatLng( evt.latLng.lat(), evt.latLng.lng() );

             if(paths.length == 0 && !firstClick) firstClick = latLng;

             //Добавляем к уже сохраненным
             paths.push( latLng );
             //Протягивам линию к новой точке
             polyline.setPath( paths );

          };

          //Слушаем клик по карте
          google.maps.event.addListener( map, 'click', updatePath );

          //Отрисуем полигон при клике на первые координыты
          var polygonDraw = function( evt ){
                var lat = evt.latLng.lat();
                var lng = evt.latLng.lng();

                //Сравниваем с первым кликом
                if( lat === firstClick.lat() && lng === firstClick.lng() ){
                    polyline.setMap( null ); //Убираем линии
                    polygon.setPath( paths ); //Ставим полигон
                    polyline.setPath( [] );
                }

          };

          //Слушаем клик по точкам линии
          google.maps.event.addListener( polyline, 'click', polygonDraw );
  }

  var mobilePoligon = new MobilePoligon( map );

Comments

[Денис]

Спасибо, как-то похоже и я в итоге сделал (у вас не хватает замыкания, если делать замкнутый контур). Идентичный вариант гугловскому - реализовать не удалось.