Google지도의 시프트 중심 (오류 : 정의되지 않은 'fromLatLngToContainerPixel'속성을 읽을 수 없습니다.)

Question

Google지도 API를 사용하여 경로를 요청하고 경로가 나중에 "preserveViewport : false"옵션을 사용하기 때문에 자동으로 중앙에 배치됩니다. 이제 저는 중심을 조금 바꿔야합니다.

var overlay_1 = new google.maps.OverlayView(); 
overlay_1.draw = function() {}; 
overlay_1.setMap(map_1); 

var point_1 
point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter()); 
point_1.x = point_1.x + 300; 
map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1)); 

가 나는 다음과 같은 오류 얻을 웹 페이지를 시작하고 때 : 그래서 나는 다음과 같은 코드에 의해 그것을 시도

Uncaught TypeError: Cannot read property 'fromLatLngToContainerPixel' of undefined

내 Printscreen에서 볼 수 있듯이, 코드가 작동을 때 그것을 내 콘솔에 넣고 있습니다.

아무도 내 웹 페이지를로드 할 때 오류가 발생하는 이유는 무엇입니까?

Answer 1

.getProjection 메서드가 유효한 결과를 반환하기 전에 오버레이에서 projection_changed 이벤트가 발생하기를 기다려야합니다.

관련 질문 : Why getProjection() is not working in V3

var overlay_1 = new google.maps.OverlayView(); 
overlay_1.draw = function() {}; 
overlay_1.setMap(map_1); 

var point_1; 
google.maps.event.addListener(overlay_1, 'projection_changed', function() { 
    point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter()); 
    point_1.x = point_1.x + 300; 

    map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1)); 
}); 

proof of concept fiddle

코드 :

이

function initialize() { 
 
    var map_1 = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var overlay_1 = new google.maps.OverlayView(); 
 
    overlay_1.draw = function() {}; 
 
    overlay_1.setMap(map_1); 
 

 
    var point_1; 
 
    google.maps.event.addListener(overlay_1, 'projection_changed', function() { 
 
    point_1 = overlay_1.getProjection().fromLatLngToContainerPixel(map_1.getCenter()); 
 
    point_1.x = point_1.x + 300; 
 
    map_1.setCenter(overlay_1.getProjection().fromContainerPixelToLatLng(point_1)); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>