将Google Maps api与React js集成(可拖动的maker不返回坐标)

将Google Maps API与React.js集成是一种常见的做法，可以在React.js应用程序中使用Google Maps的功能。通过集成，可以在应用程序中显示地图、标记位置、进行地理编码和反向地理编码等操作。

集成Google Maps API和React.js的步骤如下：

1. 在React.js应用程序中安装Google Maps API库。可以使用npm或yarn等包管理工具来安装相关依赖。
2. 在Google Cloud平台上创建一个项目，并启用Maps JavaScript API。获取API密钥，以便在应用程序中进行身份验证。
3. 在React.js组件中引入Google Maps库，并使用API密钥进行身份验证。
4. 创建一个地图组件，并在组件中初始化地图。可以设置地图的初始中心点、缩放级别等属性。
5. 在地图组件中添加标记（marker）。可以设置标记的位置、图标、信息窗口等属性。
6. 处理拖动标记时的事件。可以使用Google Maps API提供的事件监听器来捕获标记的拖动事件，并在事件处理程序中执行相应的操作。

以下是一个示例代码，展示了如何将Google Maps API与React.js集成，并创建一个可拖动的标记：

import React, { Component } from 'react';
import { GoogleMap, Marker } from 'react-google-maps';

class Map extends Component {
  handleMarkerDragEnd = (e) => {
    // 处理标记拖动结束事件
    console.log('Marker position:', e.latLng);
    // 在这里可以执行其他操作，如更新标记的位置等
  }

  render() {
    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
      >
        <Marker
          draggable={true}
          onDragEnd={this.handleMarkerDragEnd}
          position={{ lat: 37.7749, lng: -122.4194 }}
        />
      </GoogleMap>
    );
  }
}

export default Map;

在上述示例代码中，我们使用了react-google-maps库来简化与Google Maps API的集成。通过设置draggable={true}属性，我们使标记可拖动，并通过onDragEnd事件处理程序来处理标记拖动结束事件。

这样，我们就实现了将Google Maps API与React.js集成，并创建了一个可拖动的标记。根据具体需求，可以进一步扩展功能，如添加信息窗口、绘制路线等。

腾讯云提供了一系列与地图相关的产品和服务，如腾讯地图、位置服务等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多相关产品和服务的详细信息。