реагировать на нативные карты, заполнять маркеры из массива - PullRequest
Новая
       16

реагировать на нативные карты, заполнять маркеры из массива

0 голосов
/ 30 апреля 2018

Я пытаюсь визуализировать маркеры на карте динамически с конечной целью создания и уничтожения маркеров по желанию во время работы приложения. Все работает нормально, за исключением одного небольшого раздела, который: 

for (j = 0; j < markersArray.length; j ++) {
    console.log("Data: J=" + j + ", " + markersArray[j].key + ", " + markersArray[j].location[0] + ", " + markersArray[j].location[1] + ", " + markersArray[j].contactName);
    return <MapView.Marker
        key = { markersArray[j].key }
        coordinate = {{ 
            latitude: markersArray[j].location[0],
            longitude: markersArray[j].location[1] 
        }}
        title = { markersArray[j].contactName }
    />
}

Проблема здесь в том, что в массиве есть два или более объекта, но он будет проходить через цикл только один раз, где j = 0. Он никогда не будет проходить через цикл в другой раз. Мои мысли связаны с тем, что слово «возврат» используется для того, чтобы я мог отобразить маркер. Это можно обойти? Все данные идеальны, они просто не будут проходить больше, чем в первый раз.

Для педантов среди вас, которые хотят всю функцию рендеринга;): 

render() {
    return (
    <MapContainer>
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        <MapView.Circle
            key = { (this.state.currentLongitude + this.state.currentLongitude).toString() }
            center = { userPosition }
            radius = { RADIUS }
            strokeWidth = { 1 }
            strokeColor = { '#ffffff' }
            fillColor = { 'rgba(210,218,215,0.5)' }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
        />
        {(() => {
            console.log("Map Markers polling for data...");
            if (markersArray[0] != null) {
                console.log("Map Markers have found data");
                for (j = 0; j < markersArray.length; j ++) {
                    console.log("Data: J=" + j + ", " + markersArray[j].key + ", " + markersArray[j].location[0] + ", " + markersArray[j].location[1] + ", " + markersArray[j].contactName);
                    return <MapView.Marker
                        key = { markersArray[j].key }
                        coordinate = {{ 
                             latitude: markersArray[j].location[0],
                             longitude: markersArray[j].location[1] 
                        }}
                        title = { markersArray[j].contactName }
                     />
                }
            }
        })()}
        </MapView>
        <MessageBar />           
    </MapContainer>
    )
}

1 Ответ

0 голосов
/ 30 апреля 2018

Я считаю, что вам нужна функция map для отображения каждого объекта в этом массиве.

Метод map() создает новый массив с результатами , вызывающими предоставленную функцию для каждого элемента в вызывающем массиве. 

 {markersArray[0] != null && markersArray.map((marker, index) => (
            <MapView.Marker
                key = {index}
                coordinate = {{
                    latitude: marker.location[0],
                    longitude: marker.location[1]
                }}
                title = { marker.contactName }
            />
        ))
 }
...