Блог

Главная - Вопросы по программированию - Как отобразить общую ссылку в Google map react

Как отобразить общую ссылку в Google map react

#reactjs #google-maps #google-map-react

Вопрос:

Я использую react-google-maps и я могу отображать местоположение на основе lan и lat , но я не могу найти способ отображения местоположения с помощью общей ссылки, например https://goo.gl/maps/YBuwmbwH21yUE19Z9

Я хочу отобразить эту ссылку на карте Google

Вот мой код:

   withGoogleMap(props => (
    <GoogleMap
      defaultZoom={17}
      defaultCenter={{ lat: props.lat, lng: props.lng }}
    >
      {props.isMarkerShown amp;amp; (
        <Marker
          clickable={true}
          title={'asdasdads'}
          position={{ lat: props.lat, lng: props.lng }}
        />
      )}
    </GoogleMap>
  )),
);

const Location = ({ URL }) => {
  var splitUrl = URL.split('!3d');
  var latLong = splitUrl[splitUrl.length - 1].split('!4d');
  var longitude;

  if (latLong.indexOf('?') !== -1) {
    longitude = latLong[1].split('\?')[0];
  } else {
    longitude = latLong[1];
  }
  var latitude = latLong[0];

  return (
    <div
      className={`box-dashboard d-flex  justify-content-center align-items-center bg-white mb-4`}
    >
      <MyMapComponent
        lat={parseFloat(latitude)}
        lng={parseFloat(longitude)}
        isMarkerShown
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.expamp;libraries=geometry,drawing,placesamp;key=${YOUR_GOOGLE_API_KEY}`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `300px`, width: '100%' }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
};

Пожалуйста, помогите мне, спасибо вам

Ответ №1:

Пожалуйста, обратите внимание, что react-google-maps это библиотека, созданная для Maps JavaScript API, которая является продуктом платформы Google Maps. Платформа Google Maps отличается от приложения Google Maps.

Если вы хотите предоставить ссылку, которая будет запущена в приложение Google Maps, используя код, указанный в вашем коде, вы можете попробовать проверить URL-адреса карт, где вы можете создать такую ссылку https://www.google.com/maps/search/?api=1amp;query=YOURLAT,YOURLNG , которая является URL-адресом, который запустит координаты в приложении Google Maps.

Вот пример кода и фрагмент кода, который создает ссылку Google Maps для координат, которые вы нажимаете в любой точке карты:

 import React, { Component } from "react";
import { withGoogleMap, GoogleMap } from "react-google-maps";

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      center: { lat: 24.886, lng: -70.268 },
      link: ""
    };
  }

  onMapClick = e => {
    console.log(e.latLng.lat());

    this.setState({
      link:
        "https://www.google.com/maps/search/?api=1amp;query="  
        e.latLng.lat()  
        ","  
        e.latLng.lng()
    });
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={this.state.center}
        defaultZoom={3}
        onClick={this.onMapClick}
      />
    ));

    return (
      <div>
        <p>Click the map to get link of coordinate</p>
        {this.state.link !== "" amp;amp; (
          <a href={this.state.link}>{this.state.link}</a>
        )}
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: "500px" }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;
Метки: