在 React Native 中，您如何在您的应用地图中获得传统的蓝色地图标记？

Question

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

Answer 1

在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 2

一般来说，您无法在 RN 地图中显示 'standard' iOS 或 Android 标记。下一个最好的办法是使用 react-native-svg

这将创建一个 'standard' 外观的标记，以及我所做的。

下面是关于如何在 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>

在 React Native 中，您如何在您的应用地图中获得传统的蓝色地图标记？

How do you get the traditional blue map marker in your app's map in React Native?

react-native

react-hooks

maps

react-native-maps

currentlocation