Как просматривать на картах Google с помощью react-google-maps

Очень просто, как отобразить ссылку во встроенной GoogleMap, чтобы открыть карту на картах Google.

<GoogleMap
    defaultZoom={11}
    defaultCenter={{
        lat: parseFloat(props.mapCenter.lat),
        lng: parseFloat(props.mapCenter.lng)
    }}
    center={{
        lat: parseFloat(props.mapCenter.lat),
        lng: parseFloat(props.mapCenter.lng)
    }}
    defaultOptions={{
        controlSize: 20,
        mapTypeControl: false,
        fullscreenControl: false,

        minZoom: 4,
        maxZoom: 18,
        styles: mapStyles
    }}
>

Есть ли возможность отображать ссылку для просмотра на картах Google, как в режиме просмотра улиц?


reactjs google-maps react-google-maps
person teleman    schedule 16.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Обратите внимание, что react-google-maps — это библиотека, созданная для использования API JavaScript Карт. Если вы хотите использовать Maps Embed API в режиме просмотра улиц , вы можете сделать это следующим образом:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <h1>MAPS!</h1>
      <p>Please see map below</p>
      <iframe
        width="600"
        height="450"
        style={{ border: 0 }}
        loading="lazy"
        allowfullscreen
        src="https://www.google.com/maps/embed/v1/streetview?key=YOUR_API_KEY&location=46.414382,10.013988&heading=210&pitch=10&fov=35"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

person Pagemag    schedule 19.04.2021
comment
Спасибо, но я хочу использовать объект GoogleMap из react-google-maps. Я хочу знать, как создать ссылку для открытия встроенной карты в новой вкладке. Есть возможность показать полноэкранную карту — есть ли возможность «просмотреть на картах Google». - person teleman; 20.04.2021
comment
Объект GoogleMap будет отображать объект Maps JavaScript Map, в то время как Maps Embed API должен использоваться внутри ‹iframe/›. Если вы хотите увидеть координаты в maps.google.com на новой вкладке, вы можете использовать что-то вроде "https://www.google.com/maps/search/?api=1&query=" +e.latLng.lat() +","+e.latLng.lng() Здесь вы передадите latLng места и поместите его в URL-адрес maps.google.com. - person Pagemag; 21.04.2021
comment
Чтобы увидеть ссылку просмотра улиц на картах Google, вы можете использовать этот "https://www.google.com/maps/@?api=1&map_action=pano&&heading=-45&pitch=38&fov=80&viewpoint=" +this.state.center.lat +","+this.state.center.lng. Вот пример кода. - person Pagemag; 21.04.2021
comment
Я не хочу, чтобы у меня был просмотр улиц, чтобы иметь возможность просматривать в Картах Google. Я хочу иметь возможность отображать ссылку где-то на карте, например, при выборе значка расширения карты. - person teleman; 21.04.2021