Question

我花了大约5个小时来尝试使它与许多不同的代码排列一起使用，然后进行重建。我一生都无法将默认的“红色指针”标记更改为React Native Maps中的默认标记图像。

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，添加和删除了宽度/高度属性。似乎没有任何作用。我总是得到默认的红色指针。

我错过了明显的事情吗？

当我require不存在或不支持的图像时，项目打包程序/编译器失败。它绝对可以看到图像，但是对此不做任何事情。在仿真器和实际设备上，结果相同。

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

此行什么都不做，好像它被某种方式忽略了。

Answer 1

以下是在类似情况下对我有用的一种方法：使用Image代替Marker。弹出窗口的工作方式与带有标记的工作方式相同。如果尝试这样做，将从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>

Answer 2

<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>

Answer 3

有两种解决方案：

第一个解决方案（推荐）

使用图像编辑器（例如Photoshop等）调整标记图像的大小，并在icon中用作marker

为此，您可以制作三张不同大小的照片（YOUR_MARKER.png，YOUR_MARKER@2x.png，YOUR_MARKER@3x.png）（React Native会自动显示适当的项目）。

如果标记数量很多，这是一个很好的解决方案。（您可以参考here进行澄清

<Marker
    coordinate={ ... }
    tracksViewChanges={false}
    icon={require('./YOUR_MARKER.png')}
/>

第二种解决方法

正如@ shubham-raitka所说，您可以在Image内使用marker

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

</Marker>

在这种情况下，如果您的标记数量很高（大约50个或更多），则地图性能会非常低。因此，不建议使用此方法

Answer 4

您给出宽度和高度的方式有些奇怪，请尝试这种方式。

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>

我希望它对您有用，对我有用！

Answer 5

还没有足够的代表发表评论，但第一个解决方案有效，我只需要添加 resizeMode 或者它会切断图像，如果它更大。

<Marker
    coordinate={ ... }
>
    <Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />

</Marker>

反应本机地图标记自定义图像不能更改为默认值

5 个答案:

第一个解决方案（推荐）

第二种解决方法