时间戳

首页 > 解决方案 > 如果google-，maps-react中Polygon中的当前位置如何调用函数？

reactjs - 如果google-，maps-react中Polygon中的当前位置如何调用函数？

问题描述

我正在实施 google-maps-react。如果用户当前位置在多边形中，我需要功能，我需要启用一个按钮。我搜索了 containslocation() 但没有得到适当的答案。这是我的代码：

import { Map, GoogleApiWrapper, InfoWindow, Marker, Polygon } from 'google-maps-react';
...
...

      <CurrentLocation
        centerAroundCurrentLocation
        google={this.props.google}
      >
          <Polygon
            paths={triangleCoords}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35} />
          <Marker
            position={{ lat: this.state.currentPosition.lat, lng: this.state.currentPosition.lng }}
            onClick={this.onMarkerClick}
            name={'Current Location'}
            />
            <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
            onClose={this.onClose}
            >
            <div>
                <h4>{this.state.selectedPlace.name}</h4>
            </div>
            </InfoWindow>
        </CurrentLocation>

标签： reactjsgoogle-mapsgoogle-maps-react

解决方案

Hereś如何使用google-maps-react library：

  1. 每次地图准备就绪时，您都需要一个函数onReady。此函数将获取当前位置。

  2. 您可以使用HTML5 地理定位功能来获取用户的当前位置。

  3. 您需要useRef从 React 导入，以便您可以使用 ref 来获取您的多边形对象。

  4. 获得用户和多边形对象的坐标后，您需要使用google.maps.geometry.poly.containsLocation来检查多边形是否包含坐标。

  5. 您还需要导入useState以操作状态变量。您将需要它作为标志来确定坐标是否包含在多边形中，并且也将在显示按钮时用于条件。

  6. 因此，要显示按钮 html，然后使用我们设置的 state 变量并检查它是否设置为 true，然后应该显示一个按钮。

这是工作代码的代码片段：

import React, { useRef, useState } from "react";
import { Map, GoogleApiWrapper, Polygon } from "google-maps-react";

function MapContainer(props) {
  const refPoly = useRef(null);
  const style = {
    position: "absolute",
    width: "400px",
    height: "800px"
  };

  const containerStyle = {
    position: "absolute",
    width: "800px",
    height: "400px"
  };

  const [showBtn, setShowBtn] = useState(null);

  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 }
  ];

  const fetchCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        var pos = new google.maps.LatLng(
          position.coords.latitude,
          position.coords.longitude
        );

        console.log(position.coords);
        google.maps.geometry.poly.containsLocation(pos, refPoly.current.polygon)
          ? setShowBtn(true)
          : setShowBtn(false);
      },
      function(error) {
        console.log(error);
      }
    );
  };
  return (
    <div>
      {showBtn === true && (
        <button display="block" type="button">
          Showing Button!
        </button>
      )}
      <div>
        <Map
          className="map"
          style={style}
          containerStyle={containerStyle}
          google={props.google}
          onReady={fetchCurrentPosition}
          initialCenter={{
            lat: 25.774,
            lng: -80.19
          }}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={3}
        >
          <Polygon
            ref={refPoly}
            paths={triangleCoords}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35}
          />
        </Map>
      </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
  libraries: ["geometry"]
})(MapContainer);

注意：要显示按钮，请更改您所在区域周围多边形的路径值，以便将条件设置为 true。还可以使用您自己的 API 密钥来使代码正常工作。这是工作代码。

推荐阅读