Google Maps API 3: расчет длины многоугольника в пикселях

Question

У меня есть 2 (lat,lng) маркера на карте, которые называются: p1 и p2. Мне нужно рассчитать длину многоугольника, который идет от p1 до p2 в пикселях.

Это мое текущее решение путем получения значения гипотенузы:

//set global variables
var pixel_coordinates = [];
var overlay;

//create map
map = new google.maps.Map(document.getElementById('map'),myOptions);

//create overlay using this solution http://stackru.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
function MyOverlay(options) {
    this.setValues(options);
    var div = this.div_= document.createElement('div');
    div.className = "overlay";
};
MyOverlay.prototype = new google.maps.OverlayView;
MyOverlay.prototype.onAdd = function() {
var pane = this.getPanes().overlayLayer;
    pane.appendChild(this.div_);
}
MyOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}
MyOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());
    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
};
overlay = new MyOverlay( { map: map } );

//fill x,y coordinates (from lat/lng points)
pixel_coordinates[0] = overlay.getProjection().fromLatLngToContainerPixel(p1);
pixel_coordinates[1] = overlay.getProjection().fromLatLngToContainerPixel(p2);

//calculate hypotenuse
var distance = Math.round(
    Math.sqrt(
        Math.pow(Math.abs(pixel_coordinates[0].x - pixel_coordinates[1].x),2)
        +
        Math.pow(Math.abs(pixel_coordinates[0].y - pixel_coordinates[1].y),2)
    )
);
console.log(pixel_coordinates[0].x + ', ' + pixel_coordinates[0].y);
console.log(pixel_coordinates[1].x + ', ' + pixel_coordinates[1].y);
console.log(distance);

Проблема в том, что pixel_coordinates получает координаты пикселей, которые не соответствуют исходным точкам p1 и p2 на карте. Может кто-то заметить ошибку?

Обновление: это уже работает, просто обязательно используйте map.fitBounds(viewport) перед вычислением координат пикселей:)

Answer 1

Приведенный выше код работает, просто избегайте использования fitBounds после получения данных fromLatLngToContainerPixel.

Answer 2

У каждой полилинии есть ноги, и у каждой ноги есть шаги. Каждый Шаги содержат начало lat_lng и конец lat_lng. Расчет расстояния между этими двумя точками даст вам точное расстояние в пикселях.

function getPixelDistance( polyline ){
    var legs = polyline.legs;
    var steps;
    var distance = 0;
    for( var k = 0; k < legs.length; k++){
       steps = legs[k].steps;
       for( var i = 0; i < steps.length; i++ ){     

           distance += getDistance( steps[i].start_location, steps[i].end_location );
       }
    }    
     return distance;    
}     

    function getDistance( p1, 2 ){
      var pixel_coordinates = [];  
      overlay = new MyOverlay( { map: map } );
      pixel_coordinates[0] = overlay.getProjection().fromLatLngToContainerPixel(p1);
      pixel_coordinates[1] = overlay.getProjection().fromLatLngToContainerPixel(p2);
      var distance = Math.round(
          Math.sqrt(
             Math.pow(Math.abs(pixel_coordinates[0].x - pixel_coordinates[1].x),2)
             +
             Math.pow(Math.abs(pixel_coordinates[0].y - pixel_coordinates[1].y),2)
            )
        );
      return distance;
    }