Google Maps API 3：以像素为单位计算多边形的长度 [英] Google Maps API 3: Calculating length of polygon in pixels

问题描述

在地图中我有2个（lat，lng）标记，称为：p1和p2。我需要计算以像素形式从p1到p2的多边形的长度。

这是我通过获得斜边值：

  //设置全局变量
 var pixel_coordinates = []; 
 var overlay; 
 
 //创建地图
 map = new google.maps.Map（document.getElementById（'map'），myOptions）; 
 
 //使用此解决方案创建叠加层http://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3 
函数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}）; 
 
 //填充x，y坐标（从lat / lng点）
 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  - 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（视口）坐标：）

解决方案

上面的代码可以避免在获取fromLatLngToContainerPixel数据后使用fitBounds。 $ b

I have 2 (lat,lng) markers in a map called: p1 and p2. I need to calculate the length of the polygon that goes from p1 to p2 in pixels.

This is my current solution by getting the hypotenuse value:

//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);

The problem is that the pixel_coordinates is receiving pixel coordinates that do not match the original p1 and p2 points in the map. Can someone spot the error?

Update: it works already, just be sure to use the map.fitBounds(viewport) before calculating the pixel coordinates :)

解决方案

The code above works, just avoid using fitBounds after the getting the fromLatLngToContainerPixel data.

这篇关于Google Maps API 3：以像素为单位计算多边形的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！