Как расположить пользовательские элементы управления картой над ярлыком "Google" на картах Google?

Question

Пока у меня есть это.

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

В любом случае кнопка «Спутник» должна go над знаком «Google», с небольшим пробелом внизу и выровненным по левому краю. У меня по сути это:

container = document.createElement("div")
ReactDOM.render(<div>Satellite</div>, container)
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(container)

mapOptions =
  disableDefaultUI: true
  zoomControl: true
  zoom: 13
  styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
  mapTypeControl: true

map.setOptions(mapOptions)

Что я делаю не так? Я бы не хотел прибегать к CSS взломам, если это возможно.

Answer 1

Вы можете установить положение элементов управления, используя

map.setOptions({
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
})

или любое из перечисленных перечислений здесь с демонстрацией здесь .

Невозможно установить пользовательский пиксель или позицию% для этих элементов управления, не прибегая к пользовательскому CSS.

Это прекрасно, даже официальные документы предоставляют примеры для этого !

В вашем случае это будет означать, например,

.gmnoprint + .gmnoprint {
    left: -4px !important;
    bottom: 20px !important;
}

, что приведет к

---

Что обычно делается в этих ситуациях, так это скрытие элементов управления google-default, создание собственных div s и button s, а затем привязка их событий нажатия к API gmaps.

С учетом сказанного после того, как вы создали и поместили кнопку для включения типа карты satellite, содержимое слушателя может быть простым, например

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE
})

, и получить Текущий установленный идентификатор возвращается, вызывая map.getMapTypeId().