자바 스크립트 API Google지도가 화면의 오른쪽 가운데에 설정되었습니다.

Question

Google지도 인스턴스를 렌더링 할 컨테이너가 있는데,이 컨테이너 위에는 검색 상자 (출발지 및 목적지)가있는 다른 컨테이너 (HTML)가 그려져 있습니다.

원점을 선택하면 마커가지도에 그려집니다 (대상 입력과 동일).

이제지도를 "이동"하여 검색 상자의 오른쪽에 마커를 표시해야합니다.

마커를 넣을 때 마커가지도 컨테이너 안에 있는지 확인하기 위해 fitbounds를 사용하지만 일부 경우 마커는 검색 상자 아래에 그립니다.

그런 다음 "panBy"메서드를 사용하여 searchbox의 오른쪽에지도의 중심을 그리려고하지만 항상 작동하지는 않습니다.

두 마커가 항상 보이고 검색 상자의 오른쪽에 그려지는 것을 확인하려면 어떻게해야합니까?

Answer 1

이것을 고려하십시오. 마커가지도의 오른쪽에 있는지 확인해야합니다. 센터와 함께 NE 좌표를 얻으면 마커 위치와 비교하여 필요에 따라 새로운 중심을 쉽게 설정할 수 있습니다.

코드 :

google.maps.event.addListener(marker, 'click', function() { 
    var markerPos = this.getPosition(), center = map.getCenter(), 
     mapNE = map.getBounds().getNorthEast(); 

    if(!(markerPos.lng() > center.lng() && markerPos.lng() < mapNE.lng())) { //marker is not on the right side 
     //based on center and NE calulate pos to center the marker 
     map.setCenter(new google.maps.LatLng(markerPos.lat(), (markerPos.lng() - (mapNE.lng() - center.lng())/2))); 
    } 
});