Как переместить infoWindow в API карты Google

У меня проблема с отображением infoWindow в API Карт Google в приложении create-response-app. Дело в том, что он скрывает маркер при нажатии на него. Можно ли как-нибудь переместить это информационное окно чуть выше маркера?

вот репо https://github.com/Lexie14/Neighborhood-Map

карта

Поделитесь своим кодом в образце фрагмента кода вместо ссылки на github

Shireesha Parampalli 21.10.2018 11:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
798
2

Ответы 2

Вы можете использовать InfoWindowOptions.pixelOffset недвижимость для установки смещения в пикселях, вот пример того, как установить его для google-maps-reactInfoWindow:

<InfoWindow 
     pixelOffset = {new google.maps.Size(0,-48)}
     position = {this.state.selectedItem.position}
     visible = {this.state.showingInfoWindow}>
     <div>
       <h1>{this.state.selectedItem.title}</h1>
     </div>
</InfoWindow>

Существует также еще один вариант, при котором положение информационного окна может регулироваться автоматически, в этом случае необходимо указать свойство marker (привязка) вместо position:

<InfoWindow
    marker = {this.state.activeMarker}
    visible = {this.state.showingInfoWindow} >
    <div>
      <h1>{this.state.selectedItem.title}</h1>
    </div>
 </InfoWindow> 

Вот демо для справки

Вы можете попробовать это.

<InfoWindow
  options = {{
    pixelOffset: new window.google.maps.Size(
      0, -30
    )
  }}
  position = {{
    lat: 1.234,
    lng: 5.1234
  }}
>
  <div>
    Hello World!!
  </div>
</InfoWindow>

Другие вопросы по теме