Javascript 谷歌地图API 3:以像素为单位计算多边形长度
在一张名为p1和p2的地图上,我有两个(纬度、液化天然气)标记。我需要计算从p1到p2的多边形长度,单位为像素 这是我当前的解决方案,通过获取斜边值:Javascript 谷歌地图API 3:以像素为单位计算多边形长度,javascript,jquery,google-maps-api-3,Javascript,Jquery,Google Maps Api 3,在一张名为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 thi
//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);
问题在于像素_坐标接收到的像素坐标与地图中的原始p1和p2点不匹配。有人能发现错误吗
更新:它已经起作用了,只需确保在计算像素坐标之前使用地图。fitBounds(视口):上述代码起作用,只需在获取FromLatNgtoContainerPixel数据后避免使用fitBounds即可。每条多段线都有支腿,每条支腿都有台阶。每个步骤都包含开始板条液化天然气和结束板条液化天然气。计算这两点之间的距离可以得到精确的像素距离
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;
}
函数getPixelDistance(多段线){
var legs=多段线。legs;
var阶跃;
var距离=0;
对于(var k=0;k