屏幕尺寸变化时谷歌静态图像的长度计算错误[关闭]

问：

任务是计算用户单击地图创建的两点之间的线长度。唯一的限制是我必须使用 Google Static Map API。问题是我收到了显着的增量，这与原始的谷歌地图测量距离功能不同。

例如谷歌地图：

谷歌地图显示两点之间的长度为 65.19 米，而我的程序返回的距离为 61.99 米，非常接近，但如果长度较大，增量就会增加。我至少需要 ~1 米三角洲。

有趣的是，当我通过我的算法更改浏览器窗口长度的大小时会发生变化，并且当有特定大小的算法可以正常工作时

因此，以下是我计算行长的步骤：

1. 获得积分
2. 将点 X、Y 坐标转换为纬度、液化天然气

    function getLatLng(event)
    {
        var mapContainer = document.getElementById('mapImage');
        let mapWidth = mapContainer.clientWidth;
        let mapHeight = mapContainer.clientHeight;

        var x = event.clientX - (mapWidth / 2);
        var y = event.clientY - (mapHeight / 2);

        var s = Math.min(Math.max(Math.sin(mapCenterLat * (Math.PI / 180)), -.999999), .999999),
            tiles = 1 << mapZoom;

        var centerPoint = {
            'x': 128 + mapCenterLng * (256 / 360),
            'y': 128 + 0.5 * Math.log((1 + s) / (1 - s)) * -(256 / (2 * Math.PI))
        };

        var mousePoint= {
            'x': ((centerPoint.x * tiles) + x),
            'y': ((centerPoint.y * tiles) + y)
        };

        var mouseLatLng = {};
        mouseLatLng['lat'] =  ((2 * Math.atan(Math.exp(((mousePoint.y/tiles) - 128) / -(256/ (2 * Math.PI)))) - Math.PI / 2)/ (Math.PI / 180));
        mouseLatLng['lng'] =  (((mousePoint.x/tiles) - 128) / (256 / 360));

        return mouseLatLng;
    }

3. 使用纬度、液化天然气坐标计算长度

    function calculateDistance(lat1, lng1, lat2, lng2) {
        const earthRadiusKm = 6371; 
      
        const dLat = degreesToRadians(lat2 - lat1);
        const dLng = degreesToRadians(lng2 - lng1);
      
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
            Math.sin(dLng / 2) * Math.sin(dLng / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      
        const distanceKm = earthRadiusKm * c;
      
        return distanceKm;
      }
      
      function degreesToRadians(degrees) {
        return degrees * (Math.PI / 180);
      }

这是包含完整代码的沙盒：https://codepen.io/losimen/pen/rNPpYMo