Карты Google - удерживайте центр при масштабировании

В Google Картах я хотел бы сохранить центр карты на маркере в моем местоположении, когда я увеличиваю или уменьшаю масштаб. Это то, что делает Ingress, неважно, где вы дважды нажимаете (или двойным щелчком) или где вы щелкаете, карта остается в центре вашего маркера. Так что это возможно...

Лучшее, что я придумал сейчас:

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

Но это далеко не идеально, оно просто повторно центрирует карту после того, как пользователь уже увеличил масштаб...

Спасибо большое!

[EDIT] абсолютно ничего не помогает в API ref... Или в другом месте я слепой и пропустил это!

Ответ 1

Чисто используя Javascript

Сначала вы отключите функцию масштабирования прокрутки по умолчанию в карте google с помощью scrollwheel = false,
Затем создайте пользовательскую функцию масштабирования прокрутки, выполнив захват мыши и установите уровень масштабирования для карты Google.

Проверьте мой пример кода: Fiddle URL: https://jsfiddle.net/vh3gqop0/5/

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

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


	}

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

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

#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>

Ответ 2

Я понятия не имею, почему вы отметили этот вопрос как Javascript, так и Android. На Android вам нужно обернуть свой MapView внутри другого представления и обнаружить движение Double Tap внутри onInterceptTouchEvent, которое вы можете переопределить, если ваш класс может переопределить FrameLayout, например. Затем верните true, чтобы карта не обработала это событие, и вы обрабатываете его.

Для полного кода, пожалуйста, см. мой ответ здесь: fooobar.com/questions/25737/...

Ответ 3

К сожалению, Google Maps 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>

Ответ 4

Вы должны попробовать событие center_changed с помощью функции panTo.

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

Вы можете увидеть пример здесь и документацию о panTo функции здесь. Becareful, он должен испортить всю перетаскиваемую вещь.