javascript - Googleマップ（V3）LatLngから画面XYを取得するにはどうすればよいですか？

Question

マップにポリラインがあります。ユーザーがポリラインをクリックしたときのピクセル（画面）のxy座標を知りたい。ClickイベントはLatLngオブジェクトのみを返すので、latLngからピクセル座標を取得する方法を知っている人はいますか？

誰かが私を助けてくれたらとてもありがたいです！

Answer 1

LatLng オブジェクトがある場合は、Google マップの投影オブジェクトを使用して、それをタイル座標に変換してからピクセル座標に変換できます。

投影クラスのドキュメント: https://developers.google.com/maps/documentation/javascript/reference#Projection

LatLng をピクセル座標に変換する方法を説明する Google の例: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?csw=1

1つのキャッチがあります。上記は、Googleのマップdiv内のピクセル座標を提供します（必要に応じて必要になる場合があります）。画面の左上隅に相対的なピクセルが必要な場合は、もう 1 つの手順があります。ビューポートの左上隅で同じ投影を行い、2 つを差し引く必要があります。これにより、LatLng ポイントのピクセル座標が得られます。

最終的に使用したコードは次のようになります (「latLng」は入力であることに注意してください)。

var numTiles = 1 << map.getZoom();
var projection = map.getProjection();
var worldCoordinate = projection.fromLatLngToPoint(latLng);
var pixelCoordinate = new google.maps.Point(
        worldCoordinate.x * numTiles,
        worldCoordinate.y * numTiles);

var topLeft = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);

var topLeftWorldCoordinate = projection.fromLatLngToPoint(topLeft);
var topLeftPixelCoordinate = new google.maps.Point(
        topLeftWorldCoordinate.x * numTiles,
        topLeftWorldCoordinate.y * numTiles);

return new google.maps.Point(
        pixelCoordinate.x - topLeftPixelCoordinate.x,
        pixelCoordinate.y - topLeftPixelCoordinate.y
)