如何检查我的位置是在多边形或特定区域中使用react-native-maps进行本地反应?

时间:2018-06-18 08:14:04

标签: javascript react-native react-native-maps

我也通过服务器和多边形渲染位置。

当用户不在多边形时,它会抛出一些信息。



<MapView
         style={styles.map}
         toolbarEnabled={true}
         region={{
           latitude:this.state.lat,
           longitude: this.state.long,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
         rotateEnabled={true}
         provider={this.props.provider}
         onPress={e => this.onPress(e)}
         {...mapOptions}
         animateToCoordinate={[this.state.initialPosition, 500]}
       >
         {this.state.polygons.map(polygon => (
           <Polygon
             key={polygon.id}
             coordinates={polygon.coordinates}
             holes={polygon.holes}
             strokeColor="#F00"
             fillColor="rgba(255,0,0,0.5)"
             strokeWidth={2}
           />
         ))}
         {this.state.editing && (
           <Polygon
             key={this.state.editing.id}
             coordinates={this.state.editing.coordinates}
             holes={this.state.editing.holes}
             strokeColor="#000"
             fillColor="rgba(255,0,0,0.5)"
             strokeWidth={2}
           />
         )}
         <Marker coordinate={{
          latitude:this.state.lat,
          longitude: this.state.long}} >
       </Marker>
       </MapView>
&#13;
&#13;
&#13;

我正在使用:

  • react-native:0.47.1
  • react-native-maps:0.20.1

1 个答案:

答案 0 :(得分:1)

使用https://github.com/surialabs/react-native-geo-fencing库进行检查 多边形点

&#13;
&#13;
componentDidMount() {
  const polygon = [
    { lat: 3.1336599385978805, lng: 101.31866455078125 },
    { lat: 3.3091633559540123, lng: 101.66198730468757 },
    { lat: 3.091150714460597,  lng: 101.92977905273438 },
    { lat: 3.1336599385978805, lng: 101.31866455078125 } // last point has to be same as first point
  ];

  let point = {
    lat: 2.951269758090068,
    lng: 101.964111328125
  };

  GeoFencing.containsLocation(point, polygon)
    .then(() => console.log('point is within polygon'))
    .catch(() => console.log('point is NOT within polygon'))
}
&#13;
&#13;
&#13;

将多边形数据传递给多边形数组和标记点。 它会以多边形显示你的..或