我的应用程序中有一个选项,用户可以通过它看到自己的当前位置,但目前它是用大头针表示的。我想用一个跳动的蓝点来代替它,当你打开手机的Map应用程序时,iOS和Android上都会出现这个蓝点。如果不使用“自定义图像”作为我的Map标记,怎么能做到这一点呢?值得注意的是,我使用的是react-native-maps
ddhy6vgd1#
一般来说,你不能让“标准”iOS或Android标记显示在你的RNMap中,下一个最好的方法是使用react-native-svg这将创建一个'标准'看标记,我做了什么。下面的示例说明了如何在Expo SDK 43中实现这一点
import Svg, {Path, Circle, Ellipse} from 'react-native-svg' import MapView, { Marker } from "react-native-maps";
...
const icon = () => { return( <Svg height = {20} width = {20} > <Ellipse cx="10" cy="10" rx="10" ry="10" fill="blue" stroke="#fff" strokeWidth="2" /> </Svg> ) }
<MapView> <Marker coordinate={ //coordinate parameters go here } > <View> {(icon())} </View> </Marker> </MapView>
weylhg0b2#
在react-native-mapREADME.md中,有关于自定义标记的详细说明。https://github.com/react-native-maps/react-native-maps#rendering-a-marker-with-a-custom-image
<Marker coordinate={{ latitude : latitude , longitude : longitude }} image={require('../assets/pin.png')} />
qxgroojn3#
尝试使用MapView https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md中的showsUserLocation属性
<MapView ... showsUserLocation={true} style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }} ... />
fumotvh34#
从“react-native-svg”导入Svg、{路径、圆、椭圆}确保package.json中的expo位于:“^44.0.0”,并且package.json中的react-native-svg位于:“^9.3.3”,然后将下面的代码放置在标记组件中。
<MapView style={styles.map} region={mapRegion} mapType='hybrid' provider={PROVIDER_GOOGLE} > <Marker coordinate={{ latitude: mapRegion.latitude, longitude: mapRegion.longitude}} image={require('./bluecircle.png')} > <View> <Svg height = {20} width = {20} > <Ellipse cx="10" cy="10" rx="10" ry="10" fill="blue" stroke="#fff" strokeWidth="2" /> </Svg> </View> </Marker> </MapView>
4条答案
按热度按时间ddhy6vgd1#
一般来说,你不能让“标准”iOS或Android标记显示在你的RNMap中,下一个最好的方法是使用react-native-svg
这将创建一个'标准'看标记,我做了什么。
下面的示例说明了如何在Expo SDK 43中实现这一点
...
...
weylhg0b2#
在react-native-mapREADME.md中,有关于自定义标记的详细说明。https://github.com/react-native-maps/react-native-maps#rendering-a-marker-with-a-custom-image
qxgroojn3#
尝试使用MapView https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md中的showsUserLocation属性
fumotvh34#
从“react-native-svg”导入Svg、{路径、圆、椭圆}
确保package.json中的expo位于:“^44.0.0”,并且package.json中的react-native-svg位于:“^9.3.3”,
然后将下面的代码放置在标记组件中。