Отображение разных маркеров в разных точках на реагирующих нативных картах

У меня есть приложение для реагирования, в котором я использую react-native-maps. Здесь я хочу показать разные изображения маркеров для разных точек в соответствии с их индексами координат. Но он показывает только один и тот же маркер для всех. Вот код, который у меня есть сейчас:

 {this.state.coordinates.map((coordinate, index) =>
              <MapView.Marker key={`coordinate_${index}`} 
                              coordinate={coordinate} 
                              title={coordinate.title} 
                              description={coordinate.description} 
                              image={require(../assests/1.png)}>
             </MapView.Marker>
            )}

У меня есть больше изображений с именами 2.png, 3.png и т. д. Как я могу показать эти изображения в разных координатах, например, для индекса 0, он получит 1.png. Для индекса 1 он получит 2.png. Какой отсюда выход?


react-native react-native-maps
person Tanmoy Sarker    schedule 17.07.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы жестко кодируете индекс изображения для 1, этот код должен работать:

{this.state.coordinates.map((coordinate, index) =>
              <MapView.Marker key={`coordinate_${index}`} 
                              coordinate={coordinate} 
                              title={coordinate.title} 
                              description={coordinate.description} 
                              image={require(`../assests/${index}.png`)}>
             </MapView.Marker>
            )}
person Taym95    schedule 17.07.2019
comment
Это выдает ошибку, например, неверный вызов в строке - require(../assests/${index}.png) @Taym - person Tanmoy Sarker; 17.07.2019
comment
index началось с 0 у вас, вероятно, нет изображения 0.png! - person Taym95; 17.07.2019
comment
ошибка: связка не удалась: ошибка: src\screens\JobDetailsScreen.js: неверный вызов в строке 119: require(../assests/ + index + .png) Это точная ошибка, и у меня есть 0.png. Итак, в чем проблема? - person Tanmoy Sarker; 17.07.2019
comment
используйте это: require(../assests/ + index.toString() + .png) - person Taym95; 17.07.2019
comment
Все еще показывает это: ошибка: ошибка объединения: ошибка: src\screens\JobDetailsScreen.js: неверный вызов в строке 119: require(../assests/ + index.toString() + .png) - person Tanmoy Sarker; 17.07.2019
comment
Давайте продолжим это обсуждение в чате. - person Tanmoy Sarker; 18.07.2019

arrow_upward
-1
arrow_downward

Попробуйте этот код. Я надеюсь, что это решило вашу проблему.

Сначала сформируйте массив маркеров. Для экс.

var marker1 = {
    coordinates: {
                latitude: ...,
                longitude: ...
            },
            key: MARKER1,
            image: require(../assests/1.png)
        };

var marker2 = {
            coordinates: {
                latitude: ...,
                longitude: ...
            },
            key: MARKER2,
            image: require(../assests/2.png)
        };

// Вставьте его в ваш массив маркеров

this.state.markers.push(marker1);
this.state.markers.push(marker2);

//Оказывать

<MapView
...
{this.state.markers.map(marker => (
                            <MapView.Marker
                                coordinate={marker.coordinates}
                                key={marker.key}>
                                <Image source={marker.image} style={width:50, height:50}/>
                            </MapView.Marker>
                        ))}
</MapView>
person Alex    schedule 18.07.2019
comment
Все еще проблема с ‹Image source={marker.image} style={width:50, height:50}/› - person Tanmoy Sarker; 18.07.2019
comment
не могли бы вы поделиться со мной, в чем именно проблема для вас? Вы можете отобразить маркер на картах или какая-то ошибка? - person Alex; 18.07.2019
comment
Я могу сделать маркер. Но когда он отображает и должен показывать разные маркеры в разных позициях, этого не происходит. - person Tanmoy Sarker; 18.07.2019
comment
Как вы генерируете массив маркеров? не могли бы вы поделиться примером - person Alex; 18.07.2019
comment
Вот полный код: stackblitz.com/edit/react-3fk4bo?embed =1&file=index.js - person Tanmoy Sarker; 18.07.2019
comment
Попробуй это. Используйте require при формировании массива. координаты.карта((координата) => { var imageURL = String(coord.image); const coordsNumber = { 'широта': число (координата.широта), 'долгота': число (координата.долгота), 'название': String(coord.title), 'description': String(coord.description), 'image': require(imageURL) } geoCoordinates.push(coordsNumber) } - person Alex; 18.07.2019