Commit a80c246c authored by 7c00's avatar 7c00

Update examples

parent c0959852
...@@ -89,12 +89,6 @@ $ pod install ...@@ -89,12 +89,6 @@ $ pod install
### 导入地图模块 ### 导入地图模块
```jsx ```jsx
import { MapView } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
const { Marker } = MapView
<MapView>
<Marker .../>
</MapView>
``` ```
### 基本用法 ### 基本用法
...@@ -119,7 +113,7 @@ const { Marker } = MapView ...@@ -119,7 +113,7 @@ const { Marker } = MapView
### 添加可拖拽的地图标记 ### 添加可拖拽的地图标记
```jsx ```jsx
<MapView> <MapView>
<Marker <MapView.Marker
draggable draggable
   title='这是一个可拖拽的标记'    title='这是一个可拖拽的标记'
onDragEnd={({ nativeEvent }) => onDragEnd={({ nativeEvent }) =>
...@@ -139,11 +133,11 @@ const coordinate = { ...@@ -139,11 +133,11 @@ const coordinate = {
longitude: 116.397972, longitude: 116.397972,
} }
<Marker image='flag' coordinate={coordinate}> <MapView.Marker image='flag' coordinate={coordinate}>
<View style={styles.customInfoWindow}> <View style={styles.customInfoWindow}>
<Text>自定义信息窗体</Text> <Text>自定义信息窗体</Text>
</View> </View>
</Marker> </MapView.Marker>
``` ```
[更多示例](https://github.com/qiuxiang/react-native-amap3d/tree/master/example/examples) [更多示例](https://github.com/qiuxiang/react-native-amap3d/tree/master/example/examples)
......
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
TouchableOpacity, TouchableOpacity,
Dimensions, Dimensions,
} from 'react-native' } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
const styles = StyleSheet.create({ const styles = StyleSheet.create({
body: { body: {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
import { MapView, Circle } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class CircleExample extends Component { export default class CircleExample extends Component {
static navigationOptions = { static navigationOptions = {
...@@ -15,7 +15,7 @@ export default class CircleExample extends Component { ...@@ -15,7 +15,7 @@ export default class CircleExample extends Component {
render() { render() {
return ( return (
<MapView style={StyleSheet.absoluteFill}> <MapView style={StyleSheet.absoluteFill}>
<Circle <MapView.Circle
strokeWidth={5} strokeWidth={5}
strokeColor="rgba(0, 0, 255, 0.5)" strokeColor="rgba(0, 0, 255, 0.5)"
fillColor="rgba(255, 0, 0, 0.5)" fillColor="rgba(255, 0, 0, 0.5)"
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, Switch, Text, View } from 'react-native' import { StyleSheet, Switch, Text, View } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
import styles from '../styles' import styles from '../styles'
export default class ControlsExample extends Component { export default class ControlsExample extends Component {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native' import { FlatList, StyleSheet, Text, View } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
const styles = StyleSheet.create({ const styles = StyleSheet.create({
body: { body: {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, View, Text, Switch } from 'react-native' import { StyleSheet, View, Text, Switch } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
import styles from '../styles' import styles from '../styles'
export default class GesturesExample extends Component { export default class GesturesExample extends Component {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
import { MapView, HeatMap } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class HeatMapExample extends Component { export default class HeatMapExample extends Component {
static navigationOptions = { static navigationOptions = {
...@@ -15,7 +15,7 @@ export default class HeatMapExample extends Component { ...@@ -15,7 +15,7 @@ export default class HeatMapExample extends Component {
render() { render() {
return ( return (
<MapView zoomLevel={9} style={StyleSheet.absoluteFill}> <MapView zoomLevel={9} style={StyleSheet.absoluteFill}>
<HeatMap <MapView.HeatMap
opacity={0.8} opacity={0.8}
radius={20} radius={20}
coordinates={this._coordinates} coordinates={this._coordinates}
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class IndoorExample extends Component { export default class IndoorExample extends Component {
static navigationOptions = { static navigationOptions = {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, View, Text, Switch, Platform } from 'react-native' import { StyleSheet, View, Text, Switch, Platform } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
import commonStyles from '../styles' import commonStyles from '../styles'
const styles = { const styles = {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, Picker } from 'react-native' import { StyleSheet, Picker } from 'react-native'
import MapView from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class MapTypesExample extends Component { export default class MapTypesExample extends Component {
static navigationOptions = ({ navigation }) => { static navigationOptions = ({ navigation }) => {
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { MapView, Marker } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
const styles = StyleSheet.create({ const styles = StyleSheet.create({
customIcon: { customIcon: {
...@@ -75,7 +75,7 @@ export default class MarkerExample extends Component { ...@@ -75,7 +75,7 @@ export default class MarkerExample extends Component {
render() { render() {
return ( return (
<MapView style={StyleSheet.absoluteFill}> <MapView style={StyleSheet.absoluteFill}>
<Marker <MapView.Marker
active active
draggable draggable
title="一个可拖拽的标记" title="一个可拖拽的标记"
...@@ -84,20 +84,20 @@ export default class MarkerExample extends Component { ...@@ -84,20 +84,20 @@ export default class MarkerExample extends Component {
onInfoWindowPress={this._onInfoWindowPress} onInfoWindowPress={this._onInfoWindowPress}
coordinate={this._coordinates[0]} coordinate={this._coordinates[0]}
/> />
<Marker color="green" coordinate={this._coordinates[1]} > <MapView.Marker color="green" coordinate={this._coordinates[1]} >
<TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}> <TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}>
<View style={styles.customInfoWindow}> <View style={styles.customInfoWindow}>
<Text>自定义信息窗口</Text> <Text>自定义信息窗口</Text>
<Text>{this.state.time.toLocaleTimeString()}</Text> <Text>{this.state.time.toLocaleTimeString()}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</Marker> </MapView.Marker>
<Marker <MapView.Marker
image="flag" image="flag"
title="自定义图片" title="自定义图片"
coordinate={this._coordinates[2]} coordinate={this._coordinates[2]}
/> />
<Marker <MapView.Marker
title="自定义 View" title="自定义 View"
icon={() => ( icon={() => (
<View style={styles.customMarker}> <View style={styles.customMarker}>
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, Alert } from 'react-native' import { StyleSheet, Alert } from 'react-native'
import { MapView, MultiPoint } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class MultiPointExample extends Component { export default class MultiPointExample extends Component {
static navigationOptions = { static navigationOptions = {
...@@ -17,7 +17,7 @@ export default class MultiPointExample extends Component { ...@@ -17,7 +17,7 @@ export default class MultiPointExample extends Component {
render() { render() {
return ( return (
<MapView zoomLevel={12} style={StyleSheet.absoluteFill}> <MapView zoomLevel={12} style={StyleSheet.absoluteFill}>
<MultiPoint <MapView.MultiPoint
image="point" image="point"
points={this._points} points={this._points}
onItemPress={this._onItemPress} onItemPress={this._onItemPress}
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
import { MapView, Polygon } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class PolygonExample extends Component { export default class PolygonExample extends Component {
static navigationOptions = { static navigationOptions = {
...@@ -25,7 +25,7 @@ export default class PolygonExample extends Component { ...@@ -25,7 +25,7 @@ export default class PolygonExample extends Component {
render() { render() {
return ( return (
<MapView style={StyleSheet.absoluteFill}> <MapView style={StyleSheet.absoluteFill}>
<Polygon <MapView.Polygon
strokeWidth={5} strokeWidth={5}
strokeColor="rgba(0, 0, 255, 0.5)" strokeColor="rgba(0, 0, 255, 0.5)"
fillColor="rgba(255, 0, 0, 0.5)" fillColor="rgba(255, 0, 0, 0.5)"
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { StyleSheet, Alert } from 'react-native' import { StyleSheet, Alert } from 'react-native'
import { MapView, Polyline } from 'react-native-amap3d' import { MapView } from 'react-native-amap3d'
export default class PolylineExample extends Component { export default class PolylineExample extends Component {
static navigationOptions = { static navigationOptions = {
...@@ -53,17 +53,17 @@ export default class PolylineExample extends Component { ...@@ -53,17 +53,17 @@ export default class PolylineExample extends Component {
render() { render() {
return ( return (
<MapView style={StyleSheet.absoluteFill}> <MapView style={StyleSheet.absoluteFill}>
<Polyline <MapView.Polyline
width={5} width={5}
color="rgba(255, 0, 0, 0.5)" color="rgba(255, 0, 0, 0.5)"
coordinates={this._line1} coordinates={this._line1}
/> />
<Polyline <MapView.Polyline
dashed dashed
width={5} width={5}
coordinates={this._line2} coordinates={this._line2}
/> />
<Polyline <MapView.Polyline
gradient gradient
width={5} width={5}
colors={['#f44336', '#2196f3', '#4caf50']} colors={['#f44336', '#2196f3', '#4caf50']}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment