Google지도 - 확대시 중심 유지

Question

Google지도에서 확대 또는 축소 할 때 내지도의 마커에지도의 중심을 유지하고 싶습니다. Ingress가하는 것입니다. 두 번 탭 (또는 두 번 클릭)하거나 집어 넣는 위치가 중요하지 않아지도가 마커의 가운데에 위치합니다. ...

google.maps.event.addListener(mymap, 'zoom_changed', function() { 
    mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon}); 
}) 

하지만 사용자가 이미 확대 된 후 지금까지 완벽한에서지도, 그냥 다시 센터 : 그래서 내가 지금에 와서 제일은

... 가능

고마워요!

[편집] API 리퍼런스에는 아무 것도 도움이되지 않습니다 ... 아니면 다른 곳에서 나는 장님이고 그것을 놓쳤습니다!

Answer 1

왜 내가이 질문을 Javascript와 Android로 모두 태그했는지 알 수 없습니다. Android에서는 다른보기 내부에서 MapView를 래핑하고 onInterceptTouchEvent 내부에서 Double Tap 모션을 감지해야합니다.이 경우 클래스가 FrameLayout을 덮어 쓸 수있는 경우 재정의 할 수 있습니다. 그런 다음지도가이 이벤트를 처리하지 못하도록하려면 true를 반환하고 대신이 이벤트를 처리합니다. 전체 코드에 대한

여기에 내 대답을 참조하십시오 순수 https://stackoverflow.com/a/30118649/764897

Answer 2

을 자바 스크립트를 사용하여

• 먼저 스크롤 휠 = 거짓에 의해 구글지도의 기본적으로 스크롤 줌 기능을 사용하지
• 다음으로 마우스 이벤트를 캡처하여 맞춤 스크롤 기능을 만들고 Google지도의 줌 레벨을 설정하십시오.

,451,515,

내 샘플 코드를 확인 : 바이올린 URL : https://jsfiddle.net/vh3gqop0/5/

var map, i = 12; 
 
function initialize() { 
 
\t \t var myLatlng = new google.maps.LatLng(46.769603, 23.589957); 
 
\t \t var mapOptions = { 
 
\t \t \t center: myLatlng, 
 
\t \t \t zoom: i, 
 
\t \t \t scrollwheel: false, 
 
    \t \t disableDoubleClickZoom: true, 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t }; 
 
\t \t map = new google.maps.Map(document.getElementById("map_canvas"), 
 
\t \t \t mapOptions); 
 

 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: myLatlng, 
 
\t \t \t map: map, 
 
\t \t \t title: 'Any Title' 
 
\t \t }); 
 

 

 
\t } 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
$(document).ready(function() { 
 
    $('#map_canvas').on("wheel", function(evt){ 
 
    // console.log(evt.originalEvent.deltaY); 
 
    \t \t if(evt.originalEvent.deltaY > 0){ 
 
     \t map.setZoom(++i); 
 
     }else { 
 
     \t map.setZoom(--i); 
 
     } 
 
    \t \t 
 
    }); 
 
});

#map_canvas{ 
 
    height:400px; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script> 
 
<div id="map_canvas"></div>

Answer 3

불행하게도 구글지도 API는이 동작을 제공하지 않습니다.

다음 예제는 jQuery를 필요로하지 않고 두 번 클릭 및 마우스 스크롤을 지원하지만 원하는 경우 더 많은 이벤트를 추가 할 수 있습니다.

Codepen

사용 안 함에서보기 :

• 두 번 clickin
• 스크롤

가에지도 dblclick 및 zoom_changed 이벤트와 mousewheel 이벤트를 추가 패닝 캔버스.

코드에 댓글을 달았습니다. 귀하의 경우에 적합합니다. 모든 브라우저 및 장치에서 마우스 휠 속도를 표준화해야합니다. Hammer.js는 좋은 라이브러리입니다.

var map, zoom; 
 

 
function initialize() { 
 

 
    // The white house! 
 
    var myLatLng = new google.maps.LatLng(38.8977, -77.0365); 
 

 
    // Default zoom level 
 
    zoom = 17; 
 

 
    // Keep a reference for evens 
 
    var $map = document.getElementById("map"); 
 

 
    // Disable scrolling + double-click + dragging 
 
    map = new google.maps.Map($map, { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    scrollwheel: false, 
 
    disableDoubleClickZoom: true, 
 
    //draggable: false 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map 
 
    }); 
 

 

 
    // EVENTS 
 

 
    // Double Click: event zoom by 1 
 
    map.addListener('dblclick', function(e) { 
 
    zoomHandler(e.latLng, 1); 
 
    }); 
 

 
    // Zoom changed: update current zoom level 
 
    map.addListener('zoom_changed', function(e) { 
 
    // Using a timeout because `getZoom()` does not return a promise. 
 
    setTimeout(function() { 
 
     zoom = map.getZoom(); 
 
    }, 50); 
 

 
    }); 
 

 
    // Dom event: On mousewheel 
 
    $map.addEventListener('mousewheel', wheelEvent, true); 
 
} 
 

 
// Mouse Scrolling event 
 
function wheelEvent(event) { 
 
    if (event.deltaY > 1) 
 
    zoomHandler(event, -1); 
 
    else 
 
    zoomHandler(event, 1); 
 
} 
 

 
// Zoom in/out 
 
function zoomHandler(event, zoomin) { 
 
    zoom += zoomin; 
 
    map.setZoom(zoom); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map { 
 
    width: 100%; 
 
    height: 240px; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

Answer 4

당신은 panTo 기능으로 center_changed 이벤트를 시도해야합니다.

google.maps.event.addListener(mymap, 'center_changed', function() { 
    mymap.panTo({lat: myLoc.lat, lng: myLoc.lon}); 
}) 

당신은 here 및 문서에 대한 panTo 기능 here에 대한 예를 볼 수 있습니다. Becareful, 모든 draggable 물건을 뒤집어 야합니다..