如何在 React Native 中的应用程序地图中获取传统的蓝色地图标记？

Question

我的应用程序中有一个选项，用户可以在其中看到他们当前的位置，但目前用图钉表示。我想将其替换为打开手机地图应用程序时 iOS 和 Android 上的脉冲蓝点。在不使用“自定义图像”作为地图标记的情况下如何实现这一目标？值得注意的是，我正在使用react-native-maps

Answer 1

一般来说，您无法在 RN 地图中显示“标准”iOS 或 Android 标记。下一个最好的办法是使用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>

Answer 2

在react-native-map README.md文件上，有关于自定义marker的详细说明。 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')}
/>

Answer 3

尝试 MapView 中的 shownUserLocation 属性 https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md

<MapView
 ...
 showsUserLocation={true}
 style={{
   width: Dimensions.get('window').width,
   height: Dimensions.get('window').height
 }}
 ...
/>

Answer 4

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

Answer 5

通过创建2个不同半径和颜色的圆圈，您可以达到与我们通常在不同应用程序中看到的蓝点相同的效果

import MapView, { Circle} from "react-native-maps";

 <MapView>
      <Circle
        center={{
          latitude: location.latitude,
          longitude: location.longitude,
        }}
        radius={60}
        fillColor="rgba(57, 136, 251, 0.28)"
        strokeColor="transparent"
      />
      <Circle
        center={{
          latitude: location.latitude,
          longitude: location.longitude,
        }}
        radius={30}
        fillColor="rgba(57,137,252,255)"
        strokeColor="#fff"
        strokeWidth={2}
      />
   </MapView>

带蓝点的地图