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

Question

我的标记不会显示在地图上。 我最初有一个无状态的功能组件，但改为使用this.forceUpdate()的类，但它仍然无法正常工作。 我究竟做错了什么？ 我已经在Android和iOS真实设备上进行了测试。 地图正在显示，但标记未显示。 可能是地图出现在标记的顶部，如zIndex问题吗？ 我在此处硬编码了一个marker ，以确保问题出在我的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是地图上的一个点。