反应本机地图标记自定义图像不能从默认更改
react native maps marker custom image cannot change from default
我花了大约 5 个小时试图让它与许多不同的代码排列一起工作,然后重新构建。我这辈子都无法将默认的“红色指针”标记更改为 React Native 地图中的默认标记图像。
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
图像不存在或类型不受支持时,项目 packager/compiler 失败。它绝对可以看到图像,但不会对其执行任何操作。在模拟器和实际设备上的结果相同。
image={require('./images/test.png')}
这一行什么也没做,就好像它被忽略了一样。
这是一种在类似情况下对我有用的方法:使用图像代替标记。弹出窗口的工作方式与标记相同。如果您尝试这样做,图像将从 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>
你给宽高的方式有点奇怪,请用这种方式试试。
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>
我希望它对你有用,对我也有用!
<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>
有两种解决方案:
第一种方案(推荐)
使用图像编辑器(例如 Photoshop,....)调整标记图像的大小,并在 marker
中用作 icon
为此,您可以制作三张不同尺寸的照片(YOUR_MARKER.png
、YOUR_MARKER@2x.png
、YOUR_MARKER@3x.png
)(React Native 会自动显示合适的项目)。
如果你有大量的标记,这是一个很好的解决方案。(你可以参考 来澄清这一点)
<Marker
coordinate={ ... }
tracksViewChanges={false}
icon={require('./YOUR_MARKER.png')}
/>
第二种方案
正如@shubham-raitka 所说,您可以在 marker
中使用 Image
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />
</Marker>
在这种情况下,如果你的标记数量较多(大约50个或更多),地图性能会非常low.Therefore,不建议使用此方法
还没有足够的代表来发表评论,但第一个解决方案有效,我只需要添加 resizeMode 否则如果它更大,它会切断图像。
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />
</Marker>
<Marker
coordinate={d.driverLocation}
title={d.driverName}
description={d.autoNumber}
onPress={() => console.warn(d.mobaNumbers)}
image={require("../../../assets/bee.png")}
>
</Marker>
我花了大约 5 个小时试图让它与许多不同的代码排列一起工作,然后重新构建。我这辈子都无法将默认的“红色指针”标记更改为 React Native 地图中的默认标记图像。
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
图像不存在或类型不受支持时,项目 packager/compiler 失败。它绝对可以看到图像,但不会对其执行任何操作。在模拟器和实际设备上的结果相同。
image={require('./images/test.png')}
这一行什么也没做,就好像它被忽略了一样。
这是一种在类似情况下对我有用的方法:使用图像代替标记。弹出窗口的工作方式与标记相同。如果您尝试这样做,图像将从 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>
你给宽高的方式有点奇怪,请用这种方式试试。
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>
我希望它对你有用,对我也有用!
<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>
有两种解决方案:
第一种方案(推荐)
使用图像编辑器(例如 Photoshop,....)调整标记图像的大小,并在 marker
icon
为此,您可以制作三张不同尺寸的照片(YOUR_MARKER.png
、YOUR_MARKER@2x.png
、YOUR_MARKER@3x.png
)(React Native 会自动显示合适的项目)。
如果你有大量的标记,这是一个很好的解决方案。(你可以参考
<Marker
coordinate={ ... }
tracksViewChanges={false}
icon={require('./YOUR_MARKER.png')}
/>
第二种方案
正如@shubham-raitka 所说,您可以在 marker
Image
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35 }} />
</Marker>
在这种情况下,如果你的标记数量较多(大约50个或更多),地图性能会非常low.Therefore,不建议使用此方法
还没有足够的代表来发表评论,但第一个解决方案有效,我只需要添加 resizeMode 否则如果它更大,它会切断图像。
<Marker
coordinate={ ... }
>
<Image source={require('./YOUR_MARKER.png')} style={{height: 35, width:35, resizeMode:"contain" }} />
</Marker>
<Marker
coordinate={d.driverLocation}
title={d.driverName}
description={d.autoNumber}
onPress={() => console.warn(d.mobaNumbers)}
image={require("../../../assets/bee.png")}
>
</Marker>