Google지도 API 3 : 픽셀 단위로 다각형 길이 계산

Question

나는 p1과 p2라는지도에 2 개의 (위도, 표) 마커가 있습니다. 픽셀에서 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://stackoverflow.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 (뷰포트)을 사용하십시오이 작품 위 :

Answer 1

코드를 조정, 바로이 fromLatLngToContainerPixel 데이터를받은 후 fitBounds를 사용하지 .

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; 
    }