react-native-maps标记不会显示在地图上

Question

我的标记不会在地图上显示。我最初有一个无国籍的功能组件，但更改为类使用this.forceUpdate()，它仍然无法正常工作。我究竟做错了什么？我已经在Android和iOS真实设备上进行了测试。地图显示，但不是标记。难道地图出现在标记之上，就像zIndex问题？我硬编码一个存在，以确保该问题不在于我props.markers

import { StyleSheet } from 'react-native' 
import React, { Component } from 'react' 
import MapView from 'react-native-maps' 
import { connect } from 'react-redux' 
import { 
    Button, 
    Container 
} from 'native-base' 

import selectMarkers from './markers.selector' 

import { updateRegion } from './map.action' 
import Icon from 'react-native-vector-icons/FontAwesome' 
import { toggleMenu } from '../search-page/searchPage.action' 
import mapStyle from './style' 

const mapStateToProps = (state) => ({ 
    region: state.get('map').get('region'), 
    markers: selectMarkers(state) 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    onRegionChange: (region) => { 
    dispatch(updateRegion(region)) 
    }, 
    onToggleMenuClick:() => { 
    dispatch(toggleMenu()) 
    } 
}) 

class Map extends Component { 

    componentDidMount() { 
    const { store } = this.context 
    this.unsubscribe = store.subscribe(() => { }) 
    this.forceUpdate() 
    } 

    componentWillUnmount() { 
    this.unsubscribe() 
    } 

    render() { 
    console.log('map') 
    console.log('markers', this.props.markers) 
    return (
     <Container> 
     <MapView 
      style={styles.map} 
      region={{ 
      latitude: this.props.region.latitude, 
      longitude: this.props.region.longitude, 
      latitudeDelta: this.props.region.latitudeDelta, 
      longitudeDelta: this.props.region.longitudeDelta, 
      }} 
     > 
      { 
      this.props.markers.map(marker => { 
       return (
       <MapView.Marker 
        onLoad={() => this.forceUpdate()} 
        coordinate={{ latitude: marker.latitude, longitude: marker.longitude }} 
        title={marker.name} 
       /> 
      ) 
      })} 

      <MapView.Marker 
      coordinate={{ latitude: 174.7666099, longitude: -36.8457991 }} 
      title={"title"} 
      description={"description"} 
      onLoad={() => this.forceUpdate()} 
      key={1} 
      /> 
     </MapView> 
     <Button 
      small 
      icon 
      style={mapStyle.toggleMenuButton} 
      onPress={() => this.props.onToggleMenuClick()}> 
      <Icon name="sliders" size={20} color="#FFFFFF" /> 
     </Button> 
     </Container> 
    ) 
    } 
} 

Map.contextTypes = { 
    store: React.PropTypes.object 
} 

Map.propTypes = { 
    region: React.PropTypes.shape({ 
    latitude: React.PropTypes.number, 
    longitude: React.PropTypes.number, 
    latitudeDelta: React.PropTypes.number, 
    longitudeDelta: React.PropTypes.number 
    }).isRequired, 
    onRegionChange: React.PropTypes.func.isRequired, 
    onToggleMenuClick: React.PropTypes.func.isRequired, 
    markers: React.PropTypes.array 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Map) 

const styles = StyleSheet.create({ 
    map: { 
    ...StyleSheet.absoluteFillObject, 
    zIndex: -1 
    } 
}) 

Answer 1

你改变了你的经度和纬度。

latitude: 174.7666099, longitude: -36.8457991不是地图上的一个点。

latitude: -36.8457991, longitude: 174.7666099是地图上的一个点。