在我的 Reactjs 网络应用程序中集成谷歌地图后，如何获得“纬度”和“经度”？

Posted 2023-03-28

【中文标题】在我的 Reactjs 网络应用程序中集成谷歌地图后，如何获得“纬度”和“经度”？

【英文标题】：How can i get "latitude" and "longitude" after integrating google maps in my Reactjs web app?

【发布时间】：2019-08-29 22:05:54

【问题描述】：

我正在制作一个 Reactjs 应用程序，我想在应用程序中显示谷歌地图...我想实现以下功能

(1) 我的应用需要用户获取他当前位置并获取“纬度”和“经度”的权限并保存它们。

或

(2) 用户选择地图上的标记，我想获取那些经纬度点。

首先更重要。请帮帮我。请多谢。

https://www.youtube.com/watch?v=4z4hxEHlsxc

我看过这个视频，这很有帮助，但他没有教 (1) 问题。

【参考方案1】：

请参阅我的 Codepen 示例 here。你可以完成你的第一个任务。对于第二个任务，请阅读文档。这很简单。链接如下。

Markers documentation

Events documentation

另外，这个library 非常擅长处理谷歌地图。看看吧。

class App extends React.Component 

  constructor(props) 
    super(props);

    this.map = null;
    this.marker = null;

    this.state = 
      currentLocation: 
        lat: 0.0,
        lng: 0.0
      
    ;
  

  componentDidMount() 
    if (navigator && navigator.geolocation) 
      navigator.geolocation.getCurrentPosition(pos => 
        const coords = pos.coords;
        this.setState(
          currentLocation: 
            lat: coords.latitude,
            lng: coords.longitude
          
        );
        this.setPin(coords.latitude, coords.longitude)
      );

      this.map = new google.maps.Map(document.getElementById('map'), 
          center: lat: -34.397, lng: 150.644,
          zoom: 8
        );
    else
      //TODO:
    
  

  setPin(lat, lng) 
    if(this.map) 
      this.map.setCenter(lat: lat, lng: lng);

      if(this.marker) 
        this.marker.setMap(null);
        this.marker = null;
      

      this.marker = new google.maps.Marker(
        position: lat: lat, lng: lng,
        map: this.map,
        title: 'Current Location'
      );

    else
      console.log("Map has not loaded yet")
    
  

  render() 
    return (
      <div class="app">
        this.state.currentLocation.lat  / this.state.currentLocation.lng
        <div id="map"></div>
      </div>
    );
  


ReactDOM.render(
    <App />,
  document.getElementById('main')
);

【讨论】：

非常感谢。你能帮我如何从中提取可重用的组件吗？就像我有高阶组件 我有“位置： lat : ... , lng:... ” 状态。我想渲染这个。 我想从这个“地图”组件中获取纬度和经度。请帮帮我。

你能给我发一个你已经实现的链接吗？或者创建一个 Codepen 并发送给我？

我刚刚使用了你上面提到的链接。 codepen.io/samma89/pen/gyLgEJ

它说可以'读取未定义的属性'map'。而且，你使用过 。但是在 reactjs 中，我们不处理 Real DOM。请帮帮我。

你没有使用“GOOGLE API KEY”。并显示“此页面无法正确加载 Google 地图。”

【参考方案2】：

使用这个库 https://www.npmjs.com/package/react-geocode

import Geocode from "react-geocode";

/// set Google Maps Geocoding API for purposes of quota management
Geocode.setApiKey("xxxxxxxxxxxx");
Geocode.setLangu`enter code here`age("en");

// Get address from latidude & longitude.
Geocode.fromLatLng("48.8583701", "2.2922926").then(
  response => 
    const address = response.results[0].formatted_address;
    console.log(address);
  ,
  error => 
    console.error(error);
  
);

// Get latidude & longitude from address.
Geocode.fromAddress("Eiffel Tower").then(
  response => 
    const  lat, lng  = response.results[0].geometry.location;
    console.log(lat, lng);
  ,
  error => 
    console.error(error);
  
);