[javascript] Google지도 API V3에서 중심점을 오프셋하는 방법

관련 이전 답변 을 찾으면 특별히 어렵지 않습니다 .

지도의 중심을 세계 좌표로 변환하고, 원하는 위치에 겉보기 중심을 배치하기 위해지도의 중심이 필요한 위치를 찾은 다음 실제 중심을 사용하여지도의 중심을 다시 조정해야합니다 .

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

}