Как плавно переходить из одного местоположения в другое при смене координат на картах Google

Question

Я установил поле выбора, где люди могут переключаться на разные континенты на картах Google в зависимости от того, какую опцию они выбирают

$('#location-filters').on('change', function() {

if( $(this).val() == "World" ){
  map.setCenter({
    lat: 12.755724,
    lng: -3.492369
  });
  map.setZoom(2);
}

if( $(this).val() == "Europe" ){
  map.setCenter({
    lat : 58.1293954,
    lng : 11.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "North-america" ){
  map.setCenter({
    lat : 45.1293954,
    lng : -81.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "South-america" ){
  map.setCenter({
    lat : -20.1293954,
    lng : -60.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Middle-east" ){
  map.setCenter({
    lat : 34.1293954,
    lng : 38.556663
  });
  map.setZoom(6);
}

if( $(this).val() == "Africa" ){
  map.setCenter({
    lat : 0.1293954,
    lng : 31.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Asia" ){
  map.setCenter({
    lat : 40.1293954,
    lng : 90.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Oceana" ){
  map.setCenter({
    lat : -20.1293954,
    lng : 130.556663
  });
  map.setZoom(4);
}



});

Когда вы изменяете выбранную опцию, смена центральной точки карты работает, но она просто привязывается к новому местоположению.

Как сделать так, чтобы при переключении с одного континента на другой был плавный прогрессивный эффект (например, обычный эффект перетаскивания пальцем из карт Google) вместо перехода непосредственно к новому виду?

Я думал о постепенном изменении координат вместо прямого изменения значений, но я, честно говоря, понятия не имею, как это сделать, чтобы я мог проверить это и посмотреть, работает ли он.

Я был бы очень признателен за помощь.

Заранее спасибо!

EDIT:

Я пытался использовать map.panTo, и он все еще привязывается к новому месту ...

  $('#location-filters').on('change', function() {

if( $(this).val() == "World" ){
  map.panTo({
    lat: 12.755724,
    lng: -3.492369
  });
  map.setZoom(2);
}

if( $(this).val() == "Europe" ){
  map.panTo({
    lat : 58.1293954,
    lng : 11.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "North-america" ){
  map.panTo({
    lat : 45.1293954,
    lng : -81.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "South-america" ){
  map.panTo({
    lat : -20.1293954,
    lng : -60.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Middle-east" ){
  map.panTo({
    lat : 34.1293954,
    lng : 38.556663
  });
  map.setZoom(6);
}

if( $(this).val() == "Africa" ){
  map.panTo({
    lat : 0.1293954,
    lng : 31.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Asia" ){
  map.panTo({
    lat : 40.1293954,
    lng : 90.556663
  });
  map.setZoom(4);
}

if( $(this).val() == "Oceana" ){
  map.panTo({
    lat : -20.1293954,
    lng : 130.556663
  });
  map.setZoom(4);
}

});

Answer 1

Вы должны использовать map.panTo , но установить уровень масштабирования так, чтобы изменение между обеими точками (фактической и новой) было меньше ширины и высоты карты, чтобы получить плавный переход.

PANTO (LatLng)

Параметры:

latLng: LatLng | LatLngLiteral

Возвращаемое значение: Нет

Изменяет центр карты на указанный LatLng. Если изменение меньше ширины и высоты карты, переход будет плавно анимирован.

Answer 2

Используйте map.panTo вместо map.setCenter