javascript - 您如何将 google maps 高程服务用作 jsx 标签？

Question

我一直在开发一个定制的谷歌地图，我需要的一个功能是能够通过点击来了解不同位置的海拔高度。我已经用一堆 jsx 标签（即谷歌地图的标签、标记的标签等）对地图进行了编码。但是，我无法弄清楚如何为提升服务执行此操作。所以我的问题是，是否可以将谷歌地图高程服务用作 jsx 标签，如果可以，导入是什么？如果没有，添加此功能有哪些替代方法？

Answer 1

您可以先查看谷歌地图平台的高程服务。

您还可以在下面的这个工作示例和代码片段中检查我是如何在 reactjs 代码中实现它的：

import React, { Component } from "react";
import { render } from "react-dom";
import Map from "./Map";
import "./style.css";

class App extends Component {
  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat: 41.0082, lng: 28.9784 },
          zoom: 8,
          mapTypeId: "terrain"
        }}
        onMapLoad={map => {
          const elevator = new google.maps.ElevationService();
          const infowindow = new google.maps.InfoWindow({});
          infowindow.open(map);
          // Add a listener for the click event. Display the elevation for the LatLng of
          // the click inside the infowindow.
          map.addListener("click", event => {
            displayLocationElevation(event.latLng, elevator, infowindow);
          });

          function displayLocationElevation(location, elevator, infowindow) {
            // Initiate the location request
            elevator.getElevationForLocations(
              {
                locations: [location]
              },
              (results, status) => {
                infowindow.setPosition(location);

                if (status === "OK") {
                  // Retrieve the first result
                  if (results[0]) {
                    // Open the infowindow indicating the elevation at the clicked position.
                    infowindow.setContent(
                      "The elevation at this point <br>is " +
                        results[0].elevation +
                        " meters."
                    );
                  } else {
                    infowindow.setContent("No results found");
                  }
                } else {
                  infowindow.setContent(
                    "Elevation service failed due to: " + status
                  );
                }
              }
            );
          }
        }}
      />
    );
  }
}

export default App;