Question

const places = [
  {
    id: 1,
    title: "foo",
    latitude: 40.283937,
    longitude: -97.742144
  }
];

export default class Map extends Component {
...
renderMarkers() {
return places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
}

import React, { Component, Text } from "react";
import MapView from "react-native-maps";
import { StyleSheet, Dimensions } from "react-native";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import get from "lodash/get";
import { Actions } from "react-native-router-flux";

const Marker = MapView.Marker;

const deltas = {
  latitudeDelta: 0.006866,
  longitudeDelta: 0.01
};

const places = [
  {
    id: 1,
    title: "foo",
    latitude: 40.283937,
    longitude: -97.742144
  }
];

export default class Map extends Component {
  state = {
    myLocation: null,
    places: [],
    errorMessage: null
  };

  componentWillMount() {
    this.getLocationAsync();
  }

  getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        errorMessage: "Permission to access location was denied"
      });
    }

    let mylocation = await Location.getCurrentPositionAsync({});
    this.setState({ mylocation });
    console.log(this.state.mylocation);
  };

  renderMarkers() {
    return places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
  }

  render() {
    const { mylocation } = this.state;
    const region = {
      latitude: get(mylocation, "coords.latitude"),
      longitude: get(mylocation, "coords.longitude"),
      ...deltas
    };

    return (
      <MapView
        style={styles.mapStyle}
        region={region}
        showsUserLocation={true}
        zoomEnabled={true}
      >
        {this.renderMarkers()}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  mapStyle: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height
  }
});

Array [
  Object {
    "$$typeof": Symbol(react.element),
    "_owner": FiberNode {
      "tag": 1,
      "key": null,
      "type": [Function Map],
    },
    "_store": Object {},
    "key": "0",
    "props": Object {
      "coordinate": Object {
        "latitude": 40.283937,
        "longitude": -97.742144,
      },
      "onCalloutPress": [Function onCalloutPress],
      "stopPropagation": false,
      "title": "foo",
    },
    "ref": null,
    "type": [Function MapMarker],
  },
]

我正在尝试使用Map.Marker在我的React本机应用程序上显示标记，但似乎无法访问地点的经度和纬度。在默认类Map之外声明地方。感谢您的提前帮助！

Answer 1

如果没有看到标记，则表示该组件没有再次呈现。您可以尝试使用状态。如果不起作用，则可以在renderMarkers方法中尝试forceUpdate。

main

无法使用地图迭代器显示标记

1 个答案: