react-native-maps-super-cluster 添加我的标记

Question

我使用 react-native-maps-super-cluster 成功运行了网站提供的代码。

但是我不知道如何将自定义标记添加到代码中。

如何添加我的自定义标记。

当我添加我的标记时，它没有聚集。

标记数量超过1000+。

依赖是

  "dependencies": {
    "geolocation": "^0.2.0",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-geolocation-service": "^3.1.0",
    "react-native-maps": "0.26.1",
    "react-native-maps-super-cluster": "^1.6.0",
  },

波纹管是当前代码。

    import React, { Component } from 'react'
    import {
      Text,
      View,
      Image,
      StyleSheet,
      SafeAreaView,
      TouchableOpacity,
    } from 'react-native'
    import { Marker, Callout } from 'react-native-maps'
    import ClusteredMapView from 'react-native-maps-super-cluster'
    import { generateRandomPoints, generateRandomPoint } from './generator'

    const italyCenterLatitude = 37.521291,
      italyCenterLongitude = 126.991733,
      radius = 600000

    export default class App extends Component {

      constructor(props) {
        super(props)

        this.state = {
          pins: []
        }

        this.reload = this.reload.bind(this)
        this.loadMore = this.loadMore.bind(this)
        this.renderMarker = this.renderMarker.bind(this)
        this.renderCluster = this.renderCluster.bind(this)
      }

      componentDidMount() {
        this.reload()
      }

      reload = () => {
        const pins = generateRandomPoints({ latitude: italyCenterLatitude, longitude: italyCenterLongitude }, radius, 50, this.state.pins.length)
        this.setState({ pins: pins })
      }

      loadMore = () => {
        const pins = generateRandomPoints({ latitude: italyCenterLatitude, longitude: italyCenterLongitude }, radius, 50, this.state.pins.length)
        this.setState({ pins: this.state.pins.concat(pins) })
      }

      renderCluster = (cluster, onPress) => {
        const pointCount = cluster.pointCount,
          coordinate = cluster.coordinate,
          clusterId = cluster.clusterId


        return (
          <Marker identifier={`cluster-${clusterId}`} coordinate={coordinate} onPress={onPress}>
            <View style={styles.clusterContainer}>
              <Text style={styles.clusterText}>
                {pointCount}
              </Text>
            </View>
          </Marker>
        )
      }

      renderMarker = (pin) => {
        return (
          <Marker identifier={`pin-${pin.id}`} key={pin.id} coordinate={pin.location} />
        )
      }


      render() {
        return (
          <SafeAreaView style={styles.container}>
            {/* Cluster Map Example */}
            <ClusteredMapView
              style={{ flex: 1 }}
              data={this.state.pins}
              renderMarker={this.renderMarker}
              renderCluster={this.renderCluster}
              initialRegion={{ latitude: italyCenterLatitude, longitude: italyCenterLongitude, latitudeDelta: 12, longitudeDelta: 12 }}>
              <Marker coordinate={{ latitude: 44.710968, longitude: 10.640131 }} pinColor={'#65bc46'} />

              // Bellows are my marker. It do not clustered. 
              <Marker
                coordinate={{ latitude: 37.5299448479299, longitude: 126.837746714377, }}
                image={require('../gudu6/GuduIcon1w100.png')}
                pinColor={'#65bc46'}
                title=" 양천구 신월동 " description=" 228-1 번지" />
              <Marker
                coordinate={{ latitude: 37.58758812498327, longitude: 127.03790040097465, }}
                image={require('../gudu6/GuduIcon1w100.png')}
                pinColor={'#65bc46'}
                title=" 동대문구 제기동 " description=" 1212 번지" />
              <Marker
                coordinate={{ latitude: 37.579331071917416, longitude: 127.04206659725423, }}
                image={require('../gudu6/GuduIcon1w100.png')}
                pinColor={'#65bc46'}
                title=" 동대문구 제기동 " description=" 652-1 번지" />

            </ClusteredMapView>

            <View style={styles.controlBar}>
              <TouchableOpacity
                style={styles.button}
                onPress={this.reload}>
                <Text style={styles.text}>Reload</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.button}
                onPress={this.loadMore}>
                <Text style={styles.text}>Load more</Text>
              </TouchableOpacity>
            </View>

            <Image
              resizeMode='contain'
              source={require('./simbol.png')}
              style={{ position: 'absolute', bottom: 26, right: 8, width: 64, height: 64 }} />
          </SafeAreaView>
        )
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
      },
      clusterContainer: {
        width: 30,
        height: 30,
        padding: 6,
        borderWidth: 1,
        borderRadius: 15,
        alignItems: 'center',
        borderColor: '#65bc46',
        justifyContent: 'center',
        backgroundColor: 'white',
      },
      clusterText: {
        fontSize: 13,
        color: '#65bc46',
        fontWeight: '500',
        textAlign: 'center',
      },
      controlBar: {
        top: 48,
        left: 25,
        right: 25,
        height: 40,
        borderRadius: 20,
        position: 'absolute',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        backgroundColor: 'white',
        justifyContent: 'space-between',
      },
      button: {
        paddingVertical: 8,
        paddingHorizontal: 20,
      },
      novaLabLogo: {
        right: 8,
        bottom: 8,
        width: 64,
        height: 64,
        position: 'absolute',
      },
      text: {
        fontSize: 16,
        fontWeight: 'bold'
      },
      clusterContainer: {
        width: 24,
        height: 24,
        borderWidth: 1,
        borderRadius: 12,
        alignItems: 'center',
        borderColor: '#65bc46',
        justifyContent: 'center',
        backgroundColor: '#fff'
      },
      counterText: {
        fontSize: 14,
        color: '#65bc46',
        fontWeight: '400'
      },
      calloutStyle: {
        width: 64,
        height: 64,
        padding: 8,
        borderRadius: 8,
        borderColor: '#65bc46',
        backgroundColor: 'white',
      },
    })

Answer 1

我认为您的问题是您在 mapview 组件中静态定义每个标记。您传递给 renderMarker 道具的函数将为给 Mapview 的数据道具的每个标记呈现一个标记。这将允许包动态地聚集你的标记数组。