react Native中的地图上未显示多个标记

时间:2019-04-01 08:12:30

标签: reactjs react-native native

我正在尝试在地图上显示多个标记,但是我没有显示标记并且没有错误,所以我无法解决它,因此基本上我正在尝试从状态获取坐标并尝试显示多个标记由于我是新手,所以我可能会做一些愚蠢的错误。

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps'


export default class App extends Component {
  render() {
    this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 3.149771,
          longitude: 101.655449
        },

      },
      {
        title: 'hey',
        coordinate: {
          latitude: 33.5336684,
          longitude: 131.3420892
        },

      },
      {
        title: 'heyThere',
        coordinate: {
          latitude: 24.8345714,
          longitude: 67.3589759
        }
      }
      ]
    }
    return (

      <MapView
        style={{ flex: 1 }}
        showsUserLocation={true}

      >
        {this.state.markers.map((marker, index) => (
          <MapView.Marker key={index}
            coordinate={marker.coordinates}
            title={marker.title}
          />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

2 个答案:

答案 0 :(得分:1)

移动

this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
    ...

到构造函数或仅将其保留在类中(从render函数中删除)。

标记数组中有错别字。为标记数组中的所有元素设置相同的键(当前有coordinatescoordinate)。

如果未渲染MapView,请尝试将MapView的样式更改为{width:'100%',height:'100%'}。

答案 1 :(得分:0)

您的代码运行正常。我认为您的所有标记都相互重叠,或者您传递了错误的纬度或经度。请检查您的标记数组,如下所示。

 markers: [
        {
          coordinates: {
            latitude: 45.524548,
            longitude: -122.6749817,
          },
          title: "Best Place",
          description: "This is the best place in Portland",
          image: Images[0],
        },
        {
          coordinates: {
            latitude: 45.524698,
            longitude: -122.6655507,
          },
          title: "Second Best Place",
          description: "This is the second best place in Portland",
          image: Images[1],
        },
        {
          coordinates: {
            latitude: 45.5230786,
            longitude: -122.6701034,
          },
          title: "Third Best Place",
          description: "This is the third best place in Portland",
          image: Images[2],
        },
        {
          coordinates: {
            latitude: 45.521016,
            longitude: -122.6561917,
          },
          title: "Fourth Best Place",
          description: "This is the fourth best place in Portland",
          image: Images[3],
        },
      ]