反应本机地图标记自定义图像无法更改默认值

问题描述 投票:0回答:8

我花了大约 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
,添加和删除宽度/高度属性。似乎什么都不起作用。我总是得到默认的红色指针。

我错过了一些明显的事情吗?

当我

require
不存在的图像或不支持的类型时,项目打包器/编译器失败。它肯定可以看到图像,但只是不对其执行任何操作。模拟器和实际设备上的结果相同。

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

这行代码什么也没做,就好像它被忽略了一样。

react-native google-maps-markers react-native-maps
8个回答
35
投票
<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>

7
投票

有两种解决方案:

第一种解决方案(推荐)

使用图像编辑器(例如 Photoshop,....)调整标记图像的大小,并用作

icon
 中的 
marker

为此,您可以制作三张不同尺寸的照片(

YOUR_MARKER.png
[email protected]
[email protected]
)(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个或更多),地图性能会非常低。因此,不建议使用此方法


4
投票

这是一种在类似情况下对我有用的方法:使用图像代替标记。 弹出窗口的工作方式与标记相同。 如果您尝试此操作,图像将从

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>

1
投票

你给出的宽度和高度的方式有点奇怪,请尝试用这种方式。

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

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

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

</Marker>

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

0
投票

试试这个应该有效

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>

0
投票

就个人而言,仅在标记中添加图像是行不通的。但如果你把它放在一个组件中,它就可以完美工作。

<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"}
      >
      <View style={{position: "absolute"}}>
          <Image source={require('./man_marker.png')} style={{height: 35, width:35 }} />
      </View>
    </Marker>

</MapView>
© www.soinside.com 2019 - 2024. All rights reserved.