1

我正在尝试将地图标记编辑为如下图所示：

在此处输入图像描述

这是我创建标记的代码：

const MapBoxComponent = () => {
    const [markers] = useState([
        {
            title: 'hello',
            coordinates: [108.24065199465605, 16.049580619790696]
        },
        {
            title: 'hello',
            coordinates: [108.24177161264663, 16.051053734988322]
        },
        {
            title: 'hello',
            coordinates: [108.23945068795894, 16.05118303611558]
        },
        {
            title: 'hello',
            coordinates: [108.24056069541828, 16.05149705278938]
        },
        {
            title: 'hello',
            coordinates: [108.24175239173825, 16.051012173893877]
        },
        {
            title: 'hello',
            coordinates: [108.24081537245439, 16.050171714344984]
        }
    ]);

    return (
        <View style={styles.container}>
            <MapboxGL.MapView
                style={styles.map}
                styleURL={MapboxGL.StyleURL.Outdoors}
            >
                <MapboxGL.Camera
                    zoomLevel={15}
                    centerCoordinate={markers[2].coordinates}
                />

                {markers.map((marker) => (
                    <MapboxGL.PointAnnotation
                        id={marker.title}
                        children={true}
                        coordinate={marker.coordinates}
                        title={marker.title}
                    >
                        {/* <View
                            style={{
                                height: 30,
                                width: 30,
                                backgroundColor: 'red',
                                borderRadius: 50,
                                borderColor: '#fff',
                                borderWidth: 3
                            }}
                        /> */}
                         <MapboxGL.SymbolLayer
                            id="pointCount"
                            style={layerStyles.icon}
                        /> 
                    </MapboxGL.PointAnnotation>
                ))}
            </MapboxGL.MapView>
        </View>
    );
};

export default MapBoxComponent;

MapBox 自定义样式：

const layerStyles = {
    icon: {
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
        iconSize: Platform.OS === 'android' ? 1 : 0.5,
        iconOffset: [0, 5],
        textField: '2%',
        textSize: 14
    },
    iconPremium: {
        textColor: '#fff',
        textHaloColor: '#fff',
        textHaloWidth: 0.3
    },
    iconPremiumSelected: {
        textColor: '#D7B218',
        textHaloColor: '#D7B218',
        textHaloWidth: 0.1
    },
    clusterCount: {
        textField: '0',
        textSize: 18,
        textHaloColor: '#fff',
        textHaloWidth: 0.3,
        textColor: '#fff'
    }
};

所以我遇到了同样的问题，在我在 android 上运行后，我的标记没有显示在地图上，但是当我在前面的代码中删除这个代码时，标记又显示出来了。

<MapboxGL.SymbolLayer
   id="pointCount"
   style={layerStyles.icon}
   />

所以这里的任何人都可以帮我解释和解决这个问题，谢谢

我上面使用的库是从这里学习的： https ://github.com/react-native-mapbox-gl/maps

https://www.npmjs.com/package/@react-native-mapbox-gl/maps

4

0 回答 0