реагировать на собственные карты маркер пользовательское изображение не может измениться по умолчанию - PullRequest
Новая
       29

реагировать на собственные карты маркер пользовательское изображение не может измениться по умолчанию

0 голосов
/ 24 января 2019

Я потратил около 5 часов, пытаясь заставить его работать со многими различными перестановками кода, а затем перестраивать. Я не могу на всю жизнь изменить маркер «красного указателя» по умолчанию в качестве изображения маркера по умолчанию на собственных картах реакции. 

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

...

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
        latitude: 37.600425,
        longitude: -122.385861,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}
>
    <MapView.Marker
        coordinate={marker.location}
        image={require('./images/test.png')}        <------ HERE
        width={48}
        height={48}
    />
</MapView>

Изображения определенно существуют в нужной папке, я пробовал разные форматы изображений png / gif / jpg / svg, я пробовал использовать {{uri:...}} и icon/image, добавляя и удаляя атрибуты width / height. Ничто не похоже на работу. Я всегда получаю красный указатель по умолчанию.

Я что-то упустил очевидное?

Сбой упаковщика / компилятора проекта, когда я require изображение, которое не существует, или неподдерживаемый тип. Он определенно может видеть изображение, но ничего с ним не делает. Одинаковые результаты на эмуляторе и на реальном устройстве.

image={require('./images/test.png')}

Эта строка просто ничего не делает, как будто ее как-то игнорируют.

Ответы [ 3 ]

0 голосов
/ 24 января 2019

То, как вы указываете ширину и высоту, немного странно, пожалуйста, попробуйте вот так. 

import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

const markerImg = require('./images/test.png'); // <-- create a const with the path of the image

<------
------>
<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
      latitude: 37.600425,
      longitude: -122.385861,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }}
>
<Marker
    image={markerImg} // <----- add this the const with image
    onPress={() => this.setState({ marker1: !this.state.marker1 })}
    coordinate={{
        latitude: 37.600425,
        longitude: -122.385861,
    }}
    centerOffset={{ x: -18, y: -60 }}
    anchor={{ x: 0.69, y: 1 }}
/>
</Marker>
</MapView>

Я надеюсь, что это работает для вас, работает для меня!

0 голосов
/ 24 января 2019 
<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.container}
    region={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
    }}
    >

    <Marker
      coordinate={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
      }}
      description={"This is a marker in React Natve"}
      >

      <Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />

    </Marker>

</MapView>
0 голосов
/ 24 января 2019

Вот подход, который работал для меня в аналогичной ситуации: используйте изображение вместо маркера. Всплывающие окна работают так же, как с маркером. Если вы попробуете это, изображение будет импортировано из react-native. Фактическое изображение импортируется как:

var dotImage = require('./pathToImage.png')

<Marker
  coordinate={meter.latlng}
  title={"Parking Meter"}
  key={idx}
 >
<Image
    source={dotImage}
    style={{height: 6, width: 6}}
 />
 </Marker>
...