Javascript can'；使用映射迭代器显示标记

我正在尝试使用Map.Marker在我的react原生应用程序上显示标记，但它似乎无法访问位置的纬度和经度。在默认类映射之外声明位置。提前谢谢你的帮助

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

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],
  },
]

状态={
myLocation:null，
地点：[{
id:1，
标题：“富”，
纬度：40.283937，
经度：-97.742144
}],
错误消息：空
};
渲染器（）{
返回this.state.places.map（place=>(
Actions.details（{text:place.title}）}
/>
));
}

是否将道具传递给地图组件？显示地图屏幕的完整代码如果您使用数字文字（在where

place.latitude

和

place.longitude

的位置）是否有效？@abhikumar22我不太确定，但我相信没有。与问题无关，但我认为您也在用组件覆盖内置的映射构造函数。@GraceKim如果在创建

组件之前，控制台记录

place.latitude

&

place.longitude

的值，您会得到什么？

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],
  },
]

 state = {
        myLocation: null,
        places: [{
        id: 1,
        title: "foo",
        latitude: 40.283937,
        longitude: -97.742144
      }],
        errorMessage: null
      };

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