react rc-bmap地圖判斷點是否在圓內

需求：react引用百度地圖，實現https://blog.csdn.net/hl_qianduan/article/details/90208863

準備：找到合適的現成的rc-bmap http://jser.wang/bmap/ 

問題：之前原生js寫的可以直接引入GeoUtils,現在react還這麼用的話比較麻煩，該如何判斷點是否在圓內？

解決方法：中學學過的勾股定理，直角三角形兩直角邊平方之和等於斜邊之和，即a*a+b*b=c*c;

下圖更直觀一點，點到圓心之間的距離s大於半徑r的話，點不在圓內

代碼： 

（需要在建好的react項目中引入rc-bmap）         yarn add rc-bmap # 或者：npm install --save rc-bmap

 

import React, { Component } from "react";

import { Map, Base, Circle, Marker, BMapUtil } from "rc-bmap";

const { Point, Events } = Base;

export default class Bmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      point: { lng: "116.404", lat: "39.915" },
      address: '',
      oldAddress: ''
    };
  }
 
  inputChange = e => {
    this.setState({
      address: e.target.value
    });
  };

  Rad(d) {
    return (d * Math.PI) / 180.0; //經緯度轉換成三角函數中度分表形式。
  }

  handleMapClick = e => {
    const { point } = this.state;
    BMapUtil.getLocation(BMapUtil.BPoint(e.point)).then(res => {
      // 判斷是否在圓形內
      const radLat1 = this.Rad(res.point.lat);
      const radLat2 = this.Rad(point.lat);
      const a = radLat1 - radLat2;
      const b = this.Rad(res.point.lng) - this.Rad(point.lng);
      let s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;

      if (s > 0.5) {
        this.setState({
          point: res.point,
          address: res.address
        });
      } else {
        this.setState({
          point: res.point
        });
      }
    });
  };

  handleSearchClick = () => {
    BMapUtil.getPoint(this.state.address, window.myMap).then(res => {
      console.log("res:", res);
      this.setState({
        point: res
      });
    });
  };

  handleKeyDown = e => {
    if (e.keyCode === 13) {
      this.handleSearchClick();
    }
  };

  render() {
    return (
      <div style={{ height: 400 }}>
        <Map
          ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
          zoom={15}
          scrollWheelZoom
          name="myMap"
        >
          <Point
            name="center"
            lng={this.state.point.lng}
            lat={this.state.point.lat}
          />
          <Marker>
            <Point lng={this.state.point.lng} lat={this.state.point.lat} />
          </Marker>
          <Circle
            ref={this.circleRef}
            strokeColor="blue"
            radius={500}
            strokeWeight={2}
            strokeOpacity={0.5}
          >
            <Point
              name="center"
              lng={this.state.point.lng}
              lat={this.state.point.lat}
            />
          </Circle>
          <Events click={this.handleMapClick} />
        </Map>
        <input
          style={{ width: 300 }}
          type="text"
          value={this.state.address ||''}
          onChange={this.inputChange}
          onKeyDown={this.handleKeyDown}
        />
        <button onClick={this.handleSearchClick}>查詢按鈕</button>
        <p>
          {this.state.point.lng}, {this.state.point.lat}
        </p>
      </div>
    );
  }
}