在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:react-native-maps/react-native-maps开源软件地址:https://github.com/react-native-maps/react-native-maps开源编程语言:Objective-C 40.1%开源软件介绍:react-native-mapsReact Native Map components for iOS + Android ContributingThis project is being maintained by a small group of people, and any help with issues and pull requests are always appreciated. If you are able and willing to contribute, please read the guidelines. InstallationSee Installation Instructions. See Setup Instructions for the Included Example Project. CompatibilityDue to the rapid changes being made in the React Native ecosystem, we are not officially going to
support this module on anything but the latest version of React Native. With that said, we will do
our best to stay compatible with older versions as much that is practical, and the peer dependency
of this requirement is set to Component APIGeneral Usageimport MapView from 'react-native-maps'; or var MapView = require('react-native-maps'); This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself. This provides an intuitive and react-like API for declaratively controlling features on the map. Rendering a Map with an initial regionMapView <MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/> Using a MapView while controlling the region as stategetInitialState() {
return {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
};
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
/>
);
} Rendering a list of markers on a mapimport { Marker } from 'react-native-maps';
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
{this.state.markers.map((marker, index) => (
<Marker
key={index}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
</MapView> Rendering a Marker with a custom image
<Marker
coordinate={{ latitude : latitude , longitude : longitude }}
image={{uri: 'custom_pin'}}
/> Note: You can also pass the image binary data like Rendering a Marker with a custom viewNote: This has performance implications, if you wish for a simpler solution go with a custom image (save your self the head ache) <Marker coordinate={{ latitude : latitude , longitude : longitude }}>
<MyCustomMarkerView {...marker} />
</Marker> Rendering a custom Marker with a custom Calloutimport { Callout } from 'react-native-maps';
<Marker coordinate={marker.latlng}>
<MyCustomMarkerView {...marker} />
<Callout>
<MyCustomCalloutView {...marker} />
</Callout>
</Marker> Draggable Markers<MapView initialRegion={...}>
<Marker draggable
coordinate={this.state.x}
onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
/>
</MapView> Using a custom Tile OverlayTile Overlay using tile serverimport { UrlTile } from 'react-native-maps';
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<UrlTile
/**
* The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
* For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
*/
urlTemplate={this.state.urlTemplate}
/**
* The maximum zoom level for this tile overlay. Corresponds to the maximumZ setting in
* MKTileOverlay. iOS only.
*/
maximumZ={19}
/**
* flipY allows tiles with inverted y coordinates (origin at bottom left of map)
* to be used. Its default value is false.
*/
flipY={false}
/>
</MapView> For Android: add the following line in your AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET" /> For IOS: configure App Transport Security in your app Tile Overlay using local tilesTiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage. import { LocalTile } from 'react-native-maps';
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<LocalTile
/**
* The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
* For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
*/
pathTemplate={this.state.pathTemplate}
/**
* The size of provided local tiles (usually 256 or 512).
*/
tileSize={256}
/>
</MapView> For Android: LocalTile is still just overlay over original map tiles. It means that if device is online, underlying tiles will be still downloaded. If original tiles download/display is not desirable set mapType to 'none'. For example:
See OSM Wiki for how to download tiles for offline usage. Overlaying other components on the mapPlace components that you wish to overlay render() {
return (
<MapView
region={this.state.region}
/>
<OverlayComponent
style={{position: "absolute", bottom: 50}}
/>
);
} Customizing the map styleCreate the json object, or download a generated one from the google style generator. // The generated json object
mapStyle = [ ... ]
render() {
return (
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
customMapStyle={mapStyle}
/>
);
} For iOS, in addition to providing the import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
// ...
<MapView
provider={PROVIDER_GOOGLE}
customMapStyle={MapStyle}
> Then add the AirGoogleMaps directory: An unofficial step-by-step guide is also available at https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0 MapView EventsThe Tracking Region / LocationProgrammatically Changing RegionOne can change the mapview's position using refs and component methods, or by passing in an updated
Changing the style of the mapArbitrary React Views as MarkersUsing the MapView with the Animated APIThe Further, Marker views can use the animated API to enhance the effect. Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views. Not sure if this can be worked around yet or not. Markers' coordinates can also be animated, as shown in this example: Polygon CreatorOther OverlaysSo far, Gradient Polylines (iOS MapKit only)Gradient polylines can be created using the Default MarkersDefault markers will be rendered unless a custom marker is specified. One can optionally adjust the
color of the default marker by using the Custom CalloutsCallouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view. Additionally, you can fall back to the standard behavior of just having a title/description through
the Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble. To handle press on specific subview of callout use
2023-10-27 2022-08-15 2022-08-17 2022-09-23 2022-08-13 |
请发表评论