React Native Maps标记自定义图像无法从默认值更改

Question

我已经花了大约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')} 这行代码就好像被忽略了一样，什么也没发生。

- Jammo

Answer 1

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

- Shubham Raitka

---

这个立刻就起作用了。我想我在五个小时的旅程中尝试过嵌套的 image，但显然没有成功。非常感谢。现在只需要使用锚点正确地“居中”它即可。干杯！ - Jammo

非常感谢！在原始文档中没有提供这个解决方案。在文档中，image是一个标记道具。 - tirmey

Answer 2

有两种解决方案：

第一种解决方案（推荐）

使用图像编辑器(如Photoshop,...)调整你的标记图片大小，并将其作为icon在marker中使用。

为此，您可以制作三张不同尺寸的照片(YOUR_MARKER.png, [e-mail], [e-mail]) (React Native会自动显示适当的项目)。

如果您有大量标记，这是一个不错的解决方案。(您可以参考这里来澄清这个问题)

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

第二种解决方案

如@shubham-raitka所说，您可以在标记内使用图像

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

</Marker>

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

- Mahdi Bashirpour

Answer 3

以下是我在类似情况下使用的方法：使用Image代替Marker。弹出窗口与标记相同。如果您尝试此操作，则需要从react-native导入Image。实际图像的导入方式如下：

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

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

- stever

---

我先看到了Shubham Raitka的答案，但是这个嵌套的image标签对我来说是解决方案。非常感谢。 - Jammo

不用谢。这是一个好问题，很多人都曾为此苦恼过。 - stever

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>

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

- Daniel Encina

---

我尝试了静态图像对象引用，但对我来说也没有起作用。然而，来自另一个答案的嵌套image标签起作用了。 - Jammo

应该使用 center-offset 和 anchor 来处理弹出窗口。如果用于标记，用户将不知道标记的真实位置。请将弹出窗口与标记进行偏移和锚定。 - stever

Answer 5

 <Marker
   coordinate={d.driverLocation}
   title={d.driverName}
   description={d.autoNumber}
   onPress={() => console.warn(d.mobaNumbers)}
   image={require("../../../assets/bee.png")}
 >
 </Marker>

- user18279305

---

请阅读“[答案]”。如果您能解释为什么这是首选解决方案并说明其工作原理，则会更有帮助。我们的目标是教育，而不仅仅提供代码。 - the Tin Man

Answer 6

试试这个，应该可以工作

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

        <MapView
          style={styles.mapStyle}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          customMapStyle={mapStyle}>
          <Marker
            draggable
            coordinate={{
              latitude: 37.78825,
              longitude: -122.4324,
            }}
            onDragEnd={e => alert(JSON.stringify(e.nativeEvent.coordinate))}
            title={'Test Marker'}
            description={'This is a description of the marker'}>
            <Image
              source={require('./assests/custom_marker.png')}
              style={{height: 35, width: 35}}
            />
          </Marker>
        </MapView>

- Soumik Chakraborty

---

请记住，Stack Overflow 不仅旨在解决当前的问题，还要帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者和不熟悉语法的成员来说，这尤其重要。鉴于此，您能否编辑您的答案，包括您正在做什么以及为什么您认为这是最好的方法的解释？ - Jeremy Caney

Answer 7

声望还不够高，不能只留下评论，但第一个解决方案可行，我只需要添加resizeMode或者如果图片太大就会被裁剪。

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

</Marker>

- lache