Блог

Я хочу переместить элементы управления масштабированием в Javascript API Google Maps слева направо. Если мы оставим настройки по умолчанию, то получим следующее:

Если я переместу ее вот так:

 panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}
  

Затем мы получаем это:

Я также заметил, что если вы установите ее влево (не по умолчанию), вы получите:

В идеале я бы хотел, чтобы он располагался справа и по центру от элементов управления панорамированием точно так же, как настройки по умолчанию, но с другой стороны. Есть ли какой-либо способ сделать это?

Да, вы можете это сделать. Вы должны поместить оба panControl и zoomControl в одну позицию — либо google.maps.ControlPosition.TOP_RIGHT , либо google.maps.ControlPosition.RIGHT_TOP .

Используйте либо:

 panControl: true,
panControlOptions: {
  position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.TOP_RIGHT
}
  

или:

 panControl: true,
  panControlOptions: {
  position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
  style: google.maps.ZoomControlStyle.LARGE,
  position: google.maps.ControlPosition.RIGHT_TOP
}
  

Простое объяснение заключается в том, что у Google Maps есть контейнер в каждой позиции элементов управления. Каждый из этих контейнеров позиционируется и масштабируется таким образом, чтобы в него помещались все необходимые элементы управления. Затем элемент управления центрируется, если осталось немного свободного места (в этом случае ширина контейнера определяется шириной panControl ). Если вы размещаете элементы управления в разных позициях, они помещаются в отдельные контейнеры, которые масштабируются и позиционируются соответствующим образом.