[英]react-native-maps markers not displayed on map
My markers won't render on the map. 我的标记不会显示在地图上。 I initially had a stateless functional component but changed to a class to use this.forceUpdate()
and it still didn't work. 我最初有一个无状态的功能组件,但改为使用this.forceUpdate()
的类,但它仍然无法正常工作。 What am I doing wrong? 我究竟做错了什么? I have tested on both Android and iOS real devices. 我已经在Android和iOS真实设备上进行了测试。 The map is showing but not the markers. 地图正在显示,但标记未显示。 Could it be that the map is appearing on top of the markers, like a zIndex
issue? 可能是地图出现在标记的顶部,如zIndex
问题吗? I hardcoded a marker
there to be sure the problem isn't with my props.markers
我在此处硬编码了一个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
}
})
You changed up your latitude and longitude. 您更改了纬度和经度。
latitude: 174.7666099, longitude: -36.8457991
is not a point on the map. latitude: 174.7666099, longitude: -36.8457991
不是地图上的点。
latitude: -36.8457991, longitude: 174.7666099
is a point on the map. latitude: -36.8457991, longitude: 174.7666099
是地图上的一个点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.