How to hightlight a react-native map like that?

Question

我正在使用react-native-maps库显示地图，但是如何突出显示该屏幕截图这样的区域？

Answer 1

It's called Polygon .

1. You need to provide the coordinates of the area that you want to highlight.

2. Put all coordinates in an array.

3. A coordinate will be connect to its previous coordinate with a straight line. In case of the image you posted, you need a looooot of coordinates. I personally don't know any public API that returns an array of coordinates of desired area, but I'm sure there is one, just google it.

Once you have the coordinates in an array, use them like this in your MapView :

<MapView>
    <MapView.Polygon
        coordinates={[
            { latitude: 123, longitude: 123 },
            { latitude: 124, longitude: 124 },
            ...
        ]}
        strokeWidth={1}        // The width of the outline of the shape
        strokeColor='#4099FF'  // Color of the outline
        fillColor='rgba(...)'  // Shape color
    />
</MapView>