javascript - 谷歌地图 API 3 : Calculating length of polygon in pixels

标签 javascript jquery google-maps-api-3

我在 map 上有 2 个(经纬度)标记: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://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 接收的像素坐标与 map 中的原始 p1 和 p2 点不匹配。有人能发现错误吗?

更新:它已经可以工作了,只需确保在计算像素坐标之前使用map.fitBounds(viewport):)

最佳答案

上面的代码有效,只是在获取 fromLatLngToContainerPixel 数据后避免使用 fitBounds 。

关于javascript - 谷歌地图 API 3 : Calculating length of polygon in pixels,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7810717/

相关文章:

javascript - 在 Meteor 中使用 fs 模块获取 Uncaught TypeError _fs2.default.readFile 不是函数

javascript - 在 Firestore 中,如何在不为每个键创建索引的情况下执行涉及映射中键的复合查询?

javascript - 关注克隆行后的第一个输入

javascript - JS 的参数 - 哪个是最好的方法?

JavaScript - 延迟一组 setTimeout 事件

google-maps - 如何从谷歌地图中转API获取附近的车站和下一类次

javascript - 模糊时触发的输入更改事件

jquery - getBoundingClientRect() 替代方案

javascript - 谷歌地图未捕获类型错误: Cannot read property 'start_location' of undefined in google maps

google-maps - 如何自定义谷歌地图以摆脱 3D 建筑效果?