当前尝试在我的项目中实现自定义标记,但似乎无法显示这些标记。我尝试的每一种不同都会导致应用崩溃或黑条返回……
我的Map.js
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
const iconMarker = require('../assets/images/custom_marker.png');
MapboxGL.setAccessToken('ACCESS-TOKEN');
class MapTitleControl extends React.Component {
render() {
return(
<View style={styles.mapLogoContainer}>
<Image style={styles.mapLogoStyle} resizeMode='contain' source={require('../assets/images/logo_border.png')} />
</View>
);
}
}
const shape = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-73.99565, 40.73189],
}
};
class Map extends React.Component {
static navigationOptions = {
headerTitle: <MapTitleControl />,
};
render() {
return (
<View style={styles.container}>
<MapboxGL.MapView
styleURL={MapboxGL.StyleURL.Basic}
zoomLevel={11}
centerCoordinate={[-73.987, 40.749]}
style={styles.container}>
<MapboxGL.ShapeSource id='symbolLocationSource' shape={{ type: 'FeatureCollection', features: [ shape ] }}>
<MapboxGL.SymbolLayer id="symbolLocationSource" style={mapStyles.icon} />
</MapboxGL.ShapeSource>
</MapboxGL.MapView>
</View>
)
}
}
export default Map;
const mapStyles = MapboxGL.StyleSheet.create({
icon: {
iconImage: iconMarker,
iconIgnorePlacement: true,
iconSize: 0.5
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapLogoContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 44,
width: '100%',
},
mapLogoStyle: {
maxWidth: 150,
maxHeight: 50,
}
});
这是黑条的样子
我尝试了“问题”部分列出的各种解决方案,但无法解决问题。