1. ホーム
  2. javascript

[解決済み] Google maps api V3での中心点のオフセット方法

2023-05-03 05:40:10

質問

半透明のパネルで領域の一部を覆った Google マップがあります。部分的に隠されている部分を考慮し、地図の中心点を調整したいと思います。下の画像を見てください。理想的には、十字線とピンが配置されている場所が、地図の中心点になります。

ご理解いただけたでしょうか?

理由は簡単です。ズームするとき、マップを 50% 50% の位置ではなく、十字の上に中心を置く必要があります。また、マップ上にマーカーをプロットし、それらを順番に移動する予定です。マップがそれらの中央にあるとき、それらもオフセット位置にある必要があります。

事前にありがとうございます。

どのように解決するのですか?

これは、一度 関連する以前の答え .

地図の中心を世界座標に変換し、地図の中心がどこにあれば 見かけ上 を配置するために、地図の中心を求める必要があります。 本当の を使用してマップを再中心化します。

APIは常にビューポートの中心にマップを配置します。 map.getCenter() を使用すると、見かけ上の中心ではなく、実際の中心が返されるので注意が必要です。APIをオーバーロードすることで、その getCenter()setCenter() メソッドが置き換えられますが、私はそれを行っていません。

下のコード オンライン例 . この例では、ボタンをクリックすると、地図の中心(そこに道路の分岐点がある)が100px下に、200px左に移動します。

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0);

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

}