Question

嗨，我在Android设备上出现错误。

在Iphone上，它工作得很好，我在地图上获得了我的标记，但是在Android Iam上，出现了此错误

由于我使用geolib升级了代码，因此iam过滤掉了离我不近的标记，因此在Android上将无法使用...

有人知道吗？

这是我的代码：

import React from 'react';
import MapView from 'react-native-maps';
import Marker from 'react-native-maps';
import Geolib from 'geolib';

import {
  View,
  Text,
  StyleSheet,
  Button,
} from "react-native";

const geolib = require('geolib');

class Grillplaetze extends React.Component {

  constructor() {

      super();
      this.state = {
        markers: [],
        loaded: false
      }

    }

    componentDidMount() {
      this.getPosition();
    }

    getPosition(){
  navigator.geolocation.getCurrentPosition(
    (position) => {
    console.log(position);
      this.setState({
        region: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta:  0.020,
          longitudeDelta:  0.020,
        }
      }, () => this.getLocations());
    },
    (error) => this.setState({ error: error.message }),
    { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
  );
}

    getLocations() {

  return fetch('http://media-panda.de/bp/whs.geojson')
  .then(response => response.json())
  .then(responseData => {
    let { region } = this.state;
    let { latitude, longitude } = region;

    let markers = responseData.features.map(feature =>  {
      let coords = feature.geometry.coordinates
      return {
        coordinate: {
          latitude: coords[1],
          longitude: coords[0],
        }
      }
    }).filter(marker => {
      let distance = this.calculateDistance(latitude, longitude, marker.coordinate.latitude, marker.coordinate.longitude);
      return distance <= 500;
    });

    this.setState({
      markers: markers,
      loaded: true,
    });
  }).done();
  }

  calculateDistance(origLat, origLon, markerLat, markerLon) {
    return geolib.getDistance(
      {latitude: origLat, longitude: origLon},
      {latitude: markerLat, longitude: markerLon}
    );
  }


  render() {

  return (
      <View style={styles.container}>
      <MapView.Animated
        style={styles.map}
        region={this.state.region}
        showsUserLocation={true}
      >
       {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
          />
       ))}
       <MapView.Circle
                key = { (this.state.latitude + this.state.longitude).toString() }
                center = { this.state.region }
                radius = { 500 }
                strokeWidth = { 1 }
                strokeColor = { '#1a66ff' }
                fillColor = { 'rgba(230,238,255,0.5)' }

        />
       </MapView.Animated>
      </View>
     );
  }
}

export default Grillplaetze;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  },
  map: {
    width: "100%",
    height: "100%",
  },
})

Answer 1

您的错误与您实施geolib无关，而是由您对MapView.Circle的实施引起的。

如果我们查看documentation和MapView.Circle，则会看到以下内容：

|   Prop   |   Type   |   Default  |                     Note                       |
|----------|----------|------------|------------------------------------------------|
| `center` | `LatLng` | (Required) | The coordinate of the center of the circle .   
| `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters)

center和radius都是必填字段。

如果我们查看您的代码：

<MapView.Circle
  key = { (this.state.latitude + this.state.longitude).toString() }
  center = { this.state.region }
  radius = { 500 }
  strokeWidth = { 1 }
  strokeColor = { '#1a66ff' }
  fillColor = { 'rgba(230,238,255,0.5)' }
/>

您似乎已经设置了它们，但实际上尚未设置区域。您可以通过检查您的初始状态来确认这一点。

constructor () {
  super();
  this.state = {
    markers: [],
    loaded: false
  }
}

请注意，您尚未为地图设置初始区域。这是导致您的错误的原因。应用正在尝试处理该区域的未定义值。

要克服此问题，最简单的方法是为处于状态的地图设置初始区域。

类似这样的东西：

constructor () {
  super();
  this.state = {
    markers: [],
    loaded: false,
    region: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0.020,
      longitudeDelta: 0.020
    },
    latitude: 1,
    longitude: 1
  };
}

如果您的应用是针对特定区域的，那么最好选择一个与您的应用将要使用的位置接近的初始区域。

还要注意，在您的MapView.Circle代码中，您还使用了latitude和longitude的未定义值。我认为您不需要为key定义key属性。我在文档中找不到关于此要求的任何提及。

进行上述更改可使代码正常工作。

其他一些要点。

您要导入MapView.Circle两次。您只需要做一次。您应该同时拥有geolib或import GeoLib from 'geolib';，但两者都不需要。看到您使用的是const geolib = require('geolib');小写字母，我将删除geolib
您从import GeoLib from 'geolib';导入Markers的方式错误。应该将其导入为react-native-maps，但是您将import { Markers } from 'react-native-maps用作Markers是绝对可行的。我认为您可以删除未使用且不正确的MapView.Markers
import Markers from 'react-native-maps我不是100％正确或必需的。我以前从未见过以这种方式使用过它。但是，如果这没有引起您的问题，那么我认为这并不是真正的问题。
您还应该在“标记”上添加一个关键道具，以便取消警告它丢失的警告。这应该是独特的。

React Native Null参考-地图和标记（Android）

1 个答案: