在 React Native 中,您如何在您的应用地图中获得传统的蓝色地图标记?
How do you get the traditional blue map marker in your app's map in React Native?
我的应用程序中有一个选项,我的用户可以在其中看到他们的当前位置,但当前位置是用图钉表示的。当您打开 phone 的地图应用程序时,我想将其替换为 iOS 和 Android 上的脉冲蓝点。如果不使用“自定义图像”作为我的地图标记,如何实现这一点?可能值得注意的是我正在使用 react-native-maps
在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')}
/>
一般来说,您无法在 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>
我的应用程序中有一个选项,我的用户可以在其中看到他们的当前位置,但当前位置是用图钉表示的。当您打开 phone 的地图应用程序时,我想将其替换为 iOS 和 Android 上的脉冲蓝点。如果不使用“自定义图像”作为我的地图标记,如何实现这一点?可能值得注意的是我正在使用 react-native-maps
在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')}
/>
一般来说,您无法在 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>