如何在React Native中获取应用Map中的传统蓝色Map标记?

brtdzjyr  于 2023-01-31  发布在  React
关注(0)|答案(4)|浏览(134)

我的应用程序中有一个选项,用户可以通过它看到自己的当前位置,但目前它是用大头针表示的。我想用一个跳动的蓝点来代替它,当你打开手机的Map应用程序时,iOS和Android上都会出现这个蓝点。如果不使用“自定义图像”作为我的Map标记,怎么能做到这一点呢?值得注意的是,我使用的是react-native-maps

ddhy6vgd

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

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')}
/>
qxgroojn

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
 }}
 ...
/>
fumotvh3

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>

相关问题